Meter

A reading of a value within a known range, such as storage or context used, with a label and an accessible value. Built on Base UI's Meter.

shadcn Base UIUsed in 1 block

Installation

npx shadcn@4.19.0 add https://ui.edbn.me/r/meter.json

Source

Usage

meter-basic.tsx

11 lines

"use client";
import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter";

export default function MeterBasicPreview() {
  return (
    <Meter value={64} className="max-w-compact">
      <MeterLabel>Storage used</MeterLabel>
      <MeterValue />
    </Meter>
  );
}

Used in blocks

Prompt composer with attachments