Progress

Displays an indicator showing the completion progress of a task.

shadcn/ui docs

Installation

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/progress.json

Usage

import * as React from 'react'
 
import { Progress } from '@/components/ui/progress'
const [progress, setProgress] = React.useState(13);
 
React.useEffect(() => {
  const timer = setTimeout(() => setProgress(66), 500);
  return () => clearTimeout(timer);
}, [])
<Progress value={progress} className="w-[60%]" />