Neumorphism UI

Meter

Use Meter for a measurement within a known range, such as storage usage. Use Progress for completion of an ongoing task.

Preview

Storage usage

Present 64 GB used out of 100 GB with a visible label, value, and filled track.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/meter

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Set the value and range, add MeterLabel and MeterValue, and compose MeterTrack with MeterIndicator. Include units or context when a percentage alone is unclear.

"use client";

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

export default function Example() {
  return (
    <Meter value={64} max={100}>
      <MeterLabel>Storage used</MeterLabel>
      <MeterValue />
      <MeterTrack><MeterIndicator /></MeterTrack>
    </Meter>
  );
}

API Reference

Represent a measurement within a known range. Use Progress for task completion. Pair MeterLabel with a visible numeric value.

ComponentPropTypeDefaultDescription
Metervaluenumber—Current measurement within the range.
Metermin / maxnumber—Set the minimum and maximum bounds.
MeterformatIntl.NumberFormatOptions—Configure locale-aware number formatting.

Accessibility

  • 01

    Use Progress for task completion. Pair MeterLabel with a visible numeric value.

  • 02

    Preserve labels and visible focus when customizing render or className.