UsageMeterField

Renders a usage-vs-quota value as a progress meter.

Installation

pnpm dlx shadcn@latest add @chelone/usage-meter-field

Loading preview…

Renders a usage-vs-quota value as a progress meter.

Props

Prop	Type	Default	Description
cellClassName	string	—	A class name to apply to the cell element when used inside `<DataTable>`.
className	string	—	A class name to apply to the root element.
defaultValue	SourceValue<RecordType, SourceProp<RecordType>>	—
empty	ReactNode	—	The node to display when the field value is empty. Defaults to nothing. A string is translated; a ReactNode renders as-is.
headerClassName	string	—	A class name to apply to the header cell element when used inside `<DataTable>`.
label	ReactNode	—	Label to use as column header when using `<DataTable>` or `<SimpleShowLayout>`. Defaults to the capitalized field name. Set to `false` to disable the label.
limitSource	SourceKey<RecordType>	—	Sibling record field holding the limit/quota; the bar is only shown when set. A top-level key, not a path: the read is `record[limitSource]`.
record	RecordType	—	The record to render. Defaults to the ambient `RecordContext` value.
resource	string	—	The resource name. Defaults to the ambient `ResourceContext` value.
sortable	boolean	—	Disable the header click handler when used inside `<DataTable>`.
sortBy	string	—	The field to sort by when this column head is clicked, if sortable.
sortByOrder	SortOrder	—	The order used for sorting when this column head is clicked, if sortable.
source	SourceProp<RecordType>	—	Name of the property to display (dot/bracket path).
textAlign	TextAlign	—	The text alignment for the cell content, when used inside `<DataTable>`.
thresholds	{ critical: number; warning: number }	—	Ratio thresholds for warning + critical states. Defaults `{ warning: 0.8, critical: 1.0 }`.
unit	string	—	Optional unit suffix (e.g. "GB", "requests").