Usage Meter

ProNew

A plan limit meter shown as a bar or ring, with normal, warning and over-limit states and an optional breakdown into segments.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/usage-meter

Prop	Type	Default	Description
`label`	`string`	-	What is measured.
`used`	`number`	`0`	Amount used. Ignored when `segments` is set.
`limit`	`number`	-	The plan limit.
`unit`	`string`	-	Unit shown after numbers.
`segments`	`{ label: string; value: number }[]`	-	Split the total into parts, shown as a stacked bar and a legend.
`warnAt`	`number`	`80`	Percent of the limit where the warning state starts.
`variant`	`"bar" \| "ring"`	`"bar"`	Shape of the meter.
`note`	`React.ReactNode`	-	Text after the status, for example a reset date.
`action`	`React.ReactNode`	-	Content at the end of the header, such as an Upgrade button.
`locale`	`string`	`"en-US"`	Locale for numbers.

Also accepts all <div> props.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/usage-meter

Prop	Type	Default	Description
`label`	`string`	-	What is measured.
`used`	`number`	`0`	Amount used. Ignored when `segments` is set.
`limit`	`number`	-	The plan limit.
`unit`	`string`	-	Unit shown after numbers.
`segments`	`{ label: string; value: number }[]`	-	Split the total into parts, shown as a stacked bar and a legend.
`warnAt`	`number`	`80`	Percent of the limit where the warning state starts.
`variant`	`"bar" \| "ring"`	`"bar"`	Shape of the meter.
`note`	`React.ReactNode`	-	Text after the status, for example a reset date.
`action`	`React.ReactNode`	-	Content at the end of the header, such as an Upgrade button.
`locale`	`string`	`"en-US"`	Locale for numbers.

Also accepts all <div> props.