Docs
Progress

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

This component uses Radix UI
'use client'
 
import * as React from 'react'
 
import { Progress } from 'ui'
 
export function ProgressDemo() {
  const [progress, setProgress] = React.useState(13)
 
  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])
 
  return <Progress value={progress} className="w-[60%]" />
}

Installation

npx shadcn-ui@latest add progress

Usage

import { Progress } from '@/components/ui/progress'
<Progress value={33} />
PreviousPopover
NextRadio Group