Components
A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/success/warning/danger colors, sm/md/lg sizes, an optional label, custom min/max, currency and percent formatting, and threshold-driven colors.
Loading preview...
"use client"
import { Meter } from "@/components/ui/heroui-meter"
import { Label } from "@heroui/react"
import { I18nProvider } from "react-aria-components"
export default function Currency() {
return (
<I18nProvider locale="en-US">
<div className="flex w-full items-center justify-center p-10">
<Meter
className="w-64"
color="accent"
formatOptions={{ currency: "USD", style: "currency" }}
maxValue={1000}
minValue={0}
value={750}
>
<Label>Revenue</Label>
<Meter.Output />
<Meter.Track>
<Meter.Fill />
</Meter.Track>
</Meter>
</div>
</I18nProvider>
)
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...