p-progress-2

PreviousNext

Progress with label and value

Docs
cossblock

Preview

Loading preview…
registry/default/particles/p-progress-2.tsx
import {
  Progress,
  ProgressIndicator,
  ProgressLabel,
  ProgressTrack,
  ProgressValue,
} from "@/registry/default/ui/progress";

export default function Particle() {
  return (
    <Progress value={60}>
      <div className="flex items-center justify-between gap-2">
        <ProgressLabel>Export data</ProgressLabel>
        <ProgressValue />
      </div>
      <ProgressTrack>
        <ProgressIndicator />
      </ProgressTrack>
    </Progress>
  );
}

Installation

npx shadcn@latest add @coss/p-progress-2

Usage

import { PProgress2 } from "@/components/p-progress-2"
<PProgress2 />