Data & feedback@neumorphism-ui/meter

Meter

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

@neumorphism-ui/meter

Registry JSON

Preview

Storage used

64 GB / 100 GB

Installation

npx shadcn@latest add @neumorphism-ui/meter

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

"use client";

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

Example

export default function Example() {

  return (<Meter value={64} className="w-full max-w-sm"><div className="flex justify-between gap-4"><MeterLabel>{"Storage used"}</MeterLabel><MeterValue /></div><MeterTrack><MeterIndicator /></MeterTrack><p className="text-xs text-[var(--muted-foreground)]">64 GB / 100 GB</p></Meter>);
}

API Reference

Component	Prop	Type	Default	Description
`Meter`	`value`	`number`	`—`	Current measurement within the range.
`Meter`	`min / max`	`number`	`—`	Set the minimum and maximum bounds.
`Meter`	`format`	`Intl.NumberFormatOptions`	`—`	Configure locale-aware number formatting.