Meter / Progress [react-aria-components]

Component 11

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Meter / Progress [react-aria-components] to your project and fits it to your theme.

Code

How Meter / Progress [react-aria-components] is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  )
}