Meter and Progress

Frosted bars for a measurement, like storage, and for progress, like a download.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/meter

Needs the @liquikit registry in your components.json. Set it up once.

import { Meter, Progress } from "@/components/liquikit/meter"

<Meter label="Storage" value={72} />
<Progress label="Downloading" value={40} />

Use a meter for a value within a known range, and progress for a task that is under way.

Pass null as the value when you cannot tell how far along it is.

Prop	Type	Default
`label`	`ReactNode` A visible label, wired to the control for assistive technology.	—
`tint`	`string` Colour of the filled part. Defaults to the accent.	—

Also takes every prop of Base UI's meter, plus className and style.

Prop	Type	Default
`label`	`ReactNode` A visible label, wired to the control for assistive technology.	—
`tint`	`string` Colour of the filled part. Defaults to the accent.	—

Also takes every prop of Base UI's progress, plus className and style.