Meter

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

Storage Space80%

Installation

Install via VScode or copy and paste the code below into a new file, preferably in a folder at components/base.

BaseLayer

import {
  Meter as AriaMeter,
  Label,
  type MeterProps as AriaMeterProps,
} from "react-aria-components";
import { tv } from "tailwind-variants";

export const meter = tv({
  slots: {
    root: "flex w-56 flex-col gap-2",
    bar: "h-4 overflow-hidden rounded-md border border-border shadow-md",
    fill: "h-full bg-primary",
    label: "text-fg-3",
  },
});

const { root, bar, fill } = meter();

export const Meter = ({
  label,
  ...props
}: AriaMeterProps & { label?: string }) => (
  <AriaMeter className={root()} {...props}>
    {({ percentage, valueText }) => (
      <>
        <div className="flex justify-between">
          <Label className="text-fg">{label}</Label>
          <span className="value text-fg">{valueText}</span>
        </div>
        <div className={bar()}>
          <div className={fill()} style={{ width: percentage + "%" }} />
        </div>
      </>
    )}
  </AriaMeter>
);

Examples

Default