Docs
Meter

Meter

Represents a quantity within a known range, or a fractional value.

Reference
Storage Space60%

Installation

Add the following components:

Copy and paste the following code into your project.

"use client";
 
import { Meter as RaMeter } from "react-aria-components";
 
import {
  BarIndicatorLabels,
  BarIndicatorMeter,
  BarIndicatorProgress,
  barIndicatorVariants,
} from "@/components/ui/bar-indicator";
import { cn, withRenderProps } from "@/lib/utils";
 
export type MeterProps = React.ComponentPropsWithRef<typeof RaMeter> & {
  label?: string;
};
 
export const Meter = ({ className, ...props }: MeterProps) => {
  return (
    <RaMeter
      {...props}
      className={(values) =>
        cn(barIndicatorVariants.root(), withRenderProps(className)(values))
      }
    >
      {({ percentage, valueText }) => (
        <>
          <BarIndicatorLabels label={props.label} value={valueText} />
          <BarIndicatorMeter>
            <BarIndicatorProgress style={{ width: percentage + "%" }} />
          </BarIndicatorMeter>
        </>
      )}
    </RaMeter>
  );
};

Update the import paths to match your project setup.