edbnedbn/ui
ComponentsMapsPDF
GitHub stars
Explorer
Get Started
Components

Meter

Visual indicator for scalar measurements within a known range.

Componentsdocsbase-ui/meter

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/meter.json

Manual

API Reference

Root

Groups all parts of the meter. Renders a div element.

valuenumber
=0

Current value

minnumber
=0

Minimum value

maxnumber
=100

Maximum value

lownumber

Low threshold

highnumber

High threshold

optimumnumber

Optimum value

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Root data attributes
AttributeDescription
data-stateIndicates whether value is 'low', 'high', or 'optimum'
Root CSS variables
VariableDescription
--meter-valueNormalized value between 0 and 1

Track

The background track for the meter. Renders a span element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Indicator

The filled indicator showing the current value. Renders a span element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function

Label

An accessible label for the meter. Renders a span element.

classNamestring | function

CSS class name

renderReactElement | function

Custom render function