shadcn.io is not affiliated with official shadcn/ui

Shadcn Progress for React

Displays task progress with a linear indicator.

PreviewCode

Installation

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

npx shadcn@latest add https://kit.dev/r/aria/progress.json

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

yarn shadcn@latest add https://kit.dev/r/aria/progress.json

Install the following dependencies:

bun add react-aria-components

npm install react-aria-components

pnpm add react-aria-components

yarn add react-aria-components

Copy and paste the following code into your project.

components/ui/progress.tsx

"use client";

import type React from "react";
import { createContext, useContext, useMemo } from "react";
import {
  Label as LabelPrimitive,
  type LabelProps,
  ProgressBar as ProgressPrimitive,
  type ProgressBarProps as ProgressPrimitiveProps,
} from "react-aria-components";
import { cn } from "@/lib/utils";

interface ProgressContextValue {
  isIndeterminate: boolean;
  percentage?: number;
  valueText?: string;
}

Update the import paths to match your project setup.

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.

PreviewCode

Controlled

A progress bar that can be controlled by a slider.

PreviewCode

Rtl

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

PreviewCode

API Reference

Progress

PropType

className?string

AttributeType

data-slot"progress"

data-scope"progress"

data-part"root"

ProgressTrack

PropType

className?string

AttributeType

data-slot"progress-track"

data-scope"progress"

data-part"root"

ProgressIndicator

PropType

className?string

AttributeType

data-slot"progress-indicator"

data-scope"progress"

data-part"root"

ProgressRange

AttributeType

data-scope"progress"

data-part"root"

ProgressLabel

PropType

elementType?string

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"progress-label"

data-scope"progress"

data-part"root"

ProgressValue

PropType

className?string

AttributeType

data-scope"progress"

data-part"root"

Installation

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Anatomy

Usage

Demos

Label

Controlled

Rtl

API Reference

Progress

ProgressTrack

ProgressIndicator

ProgressRange

ProgressLabel

ProgressValue

useProgress