║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Meter description: A graphical display of a numeric value within a range.

links: doc: https://base-ui.com/react/components/meter#api-reference

<ComponentPreview name="meter-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/meter

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install @base-ui-components/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="meter" title="components/ui/meter.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

Usage

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

<Meter value={40}>
  <MeterLabel>Progress</MeterLabel>
  <MeterValue />
</Meter>

Examples

Without Label and Value

<ComponentPreview name="meter-simple" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Formatted Value

<ComponentPreview name="meter-with-formatted-value" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Range

<ComponentPreview name="meter-with-range" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║