Meter

Renders a progress or capacity meter with a track and indicator. It displays a label and optional value above the track. Use it to show numeric progress in a visual format.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/meter

npx layro-cli add @educlopez/meter

npx layro-cli add @educlopez/meter

bunx layro-cli add @educlopez/meter

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { Meter as MeterPrimitive } from "@base-ui/react/meter";
import { cn } from "@/lib/utils";
import { useReducedMotion } from "motion/react";
import type { ComponentProps } from "react";

export type MeterSize = "sm" | "md" | "lg";

export interface MeterProps {
  /** Accessible name when there is no visible `label` */
  "aria-label"?: string;
  /** Optional CSS class for the root */
  className?: string;