fab uifab ui

Meter

A visual indicator that displays a value within a known range.

'use client';

import { Meter } from '@/components/ui/meter';

export function MeterDefault() {
  return <Meter value={60} />;
}

Installation

pnpm dlx shadcn@latest add @fab-ui/meter

Usage

import {
  Meter,
  MeterIndicator,
  MeterLabel,
  MeterTrack,
  MeterValue,
} from "@/components/ui/meter"
<Meter value={60} />

Examples

With Label

Storage Used
'use client';

import {
  Meter,
  MeterIndicator,
  MeterLabel,
  MeterTrack,
  MeterValue,
} from '@/components/ui/meter';

export function MeterWithLabel() {
  return (
    <Meter value={75}>
      <MeterLabel>Storage Used</MeterLabel>
      <MeterValue />
      <MeterTrack>
        <MeterIndicator />
      </MeterTrack>
    </Meter>
  );
}

Label

A text label for form inputs that provides accessible labeling.

Number Field

A numeric input with increment and decrement buttons.

On this page

InstallationUsageExamplesWith Label