A segmented meter for small counts (seats used) and a bar for progress through a total.
Meter draws one segment per unit up to max (default 5). ProgressBar is a continuous bar for larger totals. Both announce value text.
Installation
npx shadcn@latest add KezLahd/rime/meterAlso installs: base.
Usage
import { Meter, ProgressBar } from "@/components/ui";
<Meter label="Seats" value={3} max={5} valueText="3 of 5 used" />Examples
Default
3/5Seats
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Meter
| Prop | Type | Default | Description |
|---|---|---|---|
| valueRequired | number | ||
| max | number | 5 | Discrete slots. The team member cap is 5. |
| labelRequired | string | Visible caption and the basis of the accessible name, e.g. "Slots in use". | |
| valueText | string | Spoken value; defaults to "3 of 5". | |
| note | ReactNode | Line under the segments, e.g. "At capacity: withdraw a customer to free a slot". | |
| size | "sm" | "md" | "md" | md = dashboard header block. sm = inline in a table cell. |
| className | string |
ProgressBar
| Prop | Type | Default | Description |
|---|---|---|---|
| valueRequired | number | ||
| maxRequired | number | ||
| labelRequired | string | ||
| valueText | string | ||
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --r-flat | 3px / 2px | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --brand-deep | tokens.css | … |
| --brand-gradient | tokens.css | … |
| --brand-soft | tokens.css | … |
| --danger-base | tokens.css | … |
| --danger-base-solid | tokens.css | … |
| --danger-ink | tokens.css | … |
| --dur-slow | tokens.css | … |
| --ease | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --rgb-brand | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --rgb-contact | tokens.css | … |
| --rgb-danger | tokens.css | … |
| --shadow-specular-dark | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-micro | tokens.css | … |
| --tracking-eyebrow | tokens.css | … |
Accessibility
- role="meter" / role="progressbar" with aria-valuenow, -min, -max and aria-valuetext.
Do and don't
Do
- Write valueText in words people use: "3 of 5 seats used".
Don't
- Don't use a meter for a task that is in progress over time; that is a Spinner or a toast.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open meter.md