Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Progress for React

Displays task progress with a linear indicator.

Ark UIBase UIReact AriaRadix UI

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/progress.json

Anatomy

Progress
├── ProgressLabel
├── ProgressTrack
├── ProgressIndicator
├── ProgressValue
├── ProgressView
└── ProgressCircle
    ├── ProgressCircleTrack
    └── ProgressCircleRange

Usage

import { useEffect, useState } from "react";
import { Progress } from "@/components/ui/progress";
const ProgressDemo = () => {
  const [progress, setProgress] = useState(13);

  useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500);
    return () => clearTimeout(timer);
  }, []);

  return <Progress className="w-[60%]" value={progress} />;
};

Demos

Label

Use ProgressLabel and ProgressValue to add a label and value display.

Controlled

A progress bar that can be controlled by a slider.

Rtl

Right-to-left progress. See the RTL configuration guide for document direction.

API Reference

Progress

div

PropType
valuenumber, max: number): string
max?number
AttributeType

ProgressTrack

PropType
valuenumber, max: number): string
max?number
AttributeType

ProgressIndicator

PropType
valuenumber, max: number): string
max?number
AttributeType

ProgressRange

PropType
valuenumber, max: number): string
max?number
AttributeType

ProgressLabel

PropType
valuenumber, max: number): string
max?number
AttributeType

ProgressValue

PropType
valuenumber, max: number): string
max?number
AttributeType

useProgress