Docs
Meter

Meter

A meter represents a quantity within a known range, or a fractional value.

react-aria-components

Meters are similar to progress bars, but represent a quantity as opposed to progress over time. See Progress for more details about progress bars.

Installation

Copy and paste the following code into your project.

"use client"
 
import * as React from "react"
import { Meter, MeterProps } from "react-aria-components"
 
import { cn, cnv } from "@/lib/utils"
 
interface _MeterProps extends MeterProps {
  barClassName?: string
  fillClassName?: string
}
 
const _Meter = ({
  className,
  barClassName,
  fillClassName,
  children,
  ...props
}: _MeterProps) => (
  <Meter className={(values) => cnv(values, "w-full", className)} {...props}>
    {(values) => (
      <>
        {typeof children === "function" ? children(values) : children}
        <div
          className={cn(
            "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
            barClassName
          )}
        >
          <div
            className={cn(
              "h-full w-full flex-1 bg-primary transition-all",
              fillClassName
            )}
            style={{
              transform: `translateX(-${100 - (values.percentage || 0)}%)`,
            }}
          />
        </div>
      </>
    )}
  </Meter>
)
 
export { _Meter as Meter }
export type { _MeterProps as MeterProps }

Update the import paths to match your project setup.

Usage

Basic

Value Label

Values are formatted as a percentage by default, but this can be modified by using the formatOptions prop to specify a different format. formatOptions is compatible with the option parameter of Intl.NumberFormat and is applied based on the current locale.

For more options see react aria components docs.

Storage space13%
SelectProgress Bar