Meter

Displays a value within a known range, such as capacity or score.

Room health

Installation

Install Meter from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/meter

Usage

import {
  Meter,
  MeterTrack,
  MeterIndicator,
  MeterLabel,
  MeterValue,
  MeterPrimitive,
} from "@/components/ui/meter"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
Meter	The root component that owns the primary structure and state.
MeterTrack	Provides the visual range used by an indicator or thumb.
MeterIndicator	Shows the current state, value, or selection.
MeterLabel	Provides a visible label for its related control or value.
MeterValue	Displays or exposes the current value.
MeterPrimitive	A composable part of the component anatomy.

API Reference

Meter exports 6 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

Meter Component
MeterTrack Component
MeterIndicator Component
MeterLabel Component
MeterValue Component
MeterPrimitive Component

Accessibility

Meter adds no application-specific accessible name by itself; use semantic content and label any interactive descendants.
Do not communicate state or meaning through color alone, and verify the composed result at text zoom and with keyboard navigation.

Source

Meter is maintained by Oros and follows the same conventions as the rest of the library. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Message Scroller Native Select