JollyUI
  1. Docs
  2. components
  3. Meter

Meter

A Meter represents a quantity within a known range, or a fractional value.

The <meter> HTML element can be used to build a meter, however it is very difficult to style cross browser. Meter helps achieve accessible meters that can be styled as needed.

Storage space13%

Installation

npx shadcn@latest add https://jollyui.dev/default/meter

Reusable Wrapper - Example

If you will use a Meter in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.

The installed file includes a reusable wrapper JollyMeter. This wrapper serves as an excellent starting point for use throughout your codebase.

Storage space80%

The JollyMeter component extends the props of React Aria Meter and adds:

PropTypeDefaultDescription
labelstring | undefinedundefinedLabel for the meter
showValuebooleantrueWhether to display the meter's value

You can copy this wrapper and create variations as needed for different use cases in your application. This approach promotes consistency while still allowing for flexibility in implementation.

Storage space80%

Examples

Basic

Storage space13%

Labeling

Value Formatting

Currency¥60

Custom value label

Space used54 of 60GB