Usage meter

Plan usage with tabular numbers and live reset times: one bar per limit, a warning line, a Limit reached state and an upgrade slot.

Markdown

On this page

Session and weekly limits with live reset times and an upgrade slot.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/usage-meter.json

Usage

tsx

import { UsageMeter, UsageMeterItem } from "@/components/ui/chatcn/usage-meter"

<UsageMeter plan="Pro" action={<Button size="sm" variant="outline">Upgrade</Button>}>
  <UsageMeterItem label="Current session" used={34} limit={45} unit="messages" resetsAt={resetAt} />
  <UsageMeterItem label="Weekly, all models" used={0.41} limit={1} resetsAt={weekly} />
</UsageMeter>

Under a day, the reset reads Resets in 2 h 14 m and ticks down; past a day it shows the wall clock. Without a unit the item shows a percentage.

Examples

States

Normal, warning, exhausted, extra usage on and capped by an admin.

Props

Prop	Type	Notes
`label`	`ReactNode`
`used`, `limit`	`number`	Pass a fraction with `limit={1}` for percent-only limits
`unit`	`string`	messages, credits. Omit for a percentage
`resetsAt`	`number \| Date \| string`	Live countdown under a day
`resetLabel`	`ReactNode`	Override the reset line
`warnAt`	`number`	Default 0.8
`overage`	`ReactNode`	Extra usage is on: the overage as text
`adminNote`	`ReactNode`	A lock and the note
`onReset`	`() => void`	Once, when `resetsAt` passes

Accessibility

Each bar is a meter labelled by its row, with the count or percentage as aria-valuetext.
The bar turns amber past the warning line and red at the limit, and Limit reached is a word, so it survives grayscale and forced colors.

Motion

Bars grow with a 280 ms transform when usage changes, never a count-up. Reduced motion snaps.
The reset label ticks once a minute above an hour and once a second below it.