Components
Meter / Progress [react-aria-components]
A Meter represents a quantity within a known range, or a fractional value.
The <meter> HTML element can be used to build a meter, however it is very difficult to style cross browser. Meter helps achieve accessible meters that can be styled as needed.
import React from "react"
import { Label } from "@/components/ui/field"
import { Meter } from "@/components/ui/meter"
export function MeterDemo() {
const [progress, setProgress] = React.useState(13)
React.useEffect(() => {
const timer = setTimeout(() => setProgress(66), 500)
return () => clearTimeout(timer)
}, [])
return (
<Meter value={progress} className={"w-3/5"}>
{({ valueText }) => (
<div className="flex w-full justify-between">
<Label>Storage space</Label>
<span className="value">{valueText}</span>
</div>
)}
</Meter>
)
}
Dependencies
Source
Published
Similar components
Explore more
Part of Jolly UI — browse the full library on 21st.dev.