Primitives

Meter

Static range meter for quota, storage, score, or usage values.

Storage used

Composition

The preferred shape for composing the installed primitive from its exported parts.

Parts

Exported compound parts from the installed source.

Meter

├── MeterLabel

├── MeterValue

├── MeterTrack

└── MeterIndicator

The refined source installs this primitive from src/registry/sources/refined/ui/meter.tsx. Install it on its own with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/meter.json

See registry manifest

Raw code

Primary installed primitive source

Base UI Meter slot

src/registry/sources/refined/ui/meter.tsx

"use client";

import { Meter as MeterPrimitive } from "@base-ui/react/meter";

import type { MeterIndicatorProps, MeterLabelProps, MeterProps, MeterTrackProps, MeterValueProps } from "@/components/refined-ui/contracts";

import { cn } from "@/components/refined-ui/lib/cn";

import { skinSlot } from "@/components/refined-ui/skin";

// Refined skin slot, 100% Base UI: static gauge, Track is --muted rail, Indicator fills w/ --primary from value/min/max, no JS.

// Unlike Progress, value always a number (role=meter, never indeterminate); optional Label+Value row above rail.

export function Meter({ className, ...props }: MeterProps) {

return (

<MeterPrimitive.Root

data-ui="agent"

data-slot="meter"

className={cn("flex w-full flex-col gap-2", skinSlot("meter", {}), className)}

{...props}

/>

);

}

export function MeterLabel({ className, ...props }: MeterLabelProps) {

return (

<MeterPrimitive.Label

data-ui="agent"

data-slot="meter-label"

className={cn("text-label font-medium text-foreground", className)}

{...props}

/>

);

}

export function MeterValue({ className, ...props }: MeterValueProps) {

return (

<MeterPrimitive.Value

data-ui="agent"

data-slot="meter-value"

className={cn("text-label tabular-nums text-muted-foreground", className)}

{...props}

/>

);

}

export function MeterTrack({ className, ...props }: MeterTrackProps) {

return (

<MeterPrimitive.Track

data-ui="agent"

data-slot="meter-track"

      className={cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", skinSlot("meter-track", {}), className)}

{...props}

/>

);

}

export function MeterIndicator({ className, ...props }: MeterIndicatorProps) {

return (

<MeterPrimitive.Indicator

data-ui="agent"

data-slot="meter-indicator"

className={cn(

        "h-full rounded-full bg-primary transition-[width] duration-[var(--duration-slow)] ease-[var(--ease-emphasized)]",

skinSlot("meter-indicator", {}),

className,

)}

{...props}

/>

);

}

Refined UI

Meter

Composition

Parts

Raw code