p-meter-4

PreviousNext

Meter with range

Docs
cossblock

Preview

Loading preview…
registry/default/particles/p-meter-4.tsx
"use client";

import {
  Meter,
  MeterIndicator,
  MeterLabel,
  MeterTrack,
  MeterValue,
} from "@/registry/default/ui/meter";

export default function Particle() {
  return (
    <Meter max={1000} min={500} value={700}>
      <div className="flex items-center justify-between gap-2">
        <MeterLabel>Bandwidth (Mbps)</MeterLabel>
        <MeterValue>{(_formatted, value) => value}</MeterValue>
      </div>
      <MeterTrack>
        <MeterIndicator />
      </MeterTrack>
    </Meter>
  );
}

Installation

npx shadcn@latest add @coss/p-meter-4

Usage

import { PMeter4 } from "@/components/p-meter-4"
<PMeter4 />