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/base/progress.json

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

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

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

Install the following dependencies:

bun add @base-ui/react

npm install @base-ui/react

pnpm add @base-ui/react

yarn add @base-ui/react

Copy and paste the following code into your project.

components/ui/progress.tsx

"use client";

import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
import { cn } from "@/lib/utils";

export const Progress = (props: ProgressPrimitive.Root.Props) => {
  const { className, children, value, ...rest } = props;

  return (
    <ProgressPrimitive.Root
      className={cn("cn-progress-root flex flex-wrap gap-3", className)}
      data-slot="progress"
      value={value}
      {...rest}
    >
      {children}
      <ProgressTrack>
        <ProgressIndicator />

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

div

PropType

valuenumber | null

format?Intl.NumberFormatOptions

getAriaValueText?(formattedValue: string, value: number | null) → string

locale?Intl.LocalesArgument

max?number

min?number

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"progress"

data-scope"progress"

data-part"root"

ProgressLabel

span

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"progress-label"

data-scope"progress"

data-part"label"

ProgressTrack

div

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"progress-track"

data-scope"progress"

data-part"track"

ProgressIndicator

div

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"progress-indicator"

data-scope"progress"

data-part"indicator"

ProgressRange

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-scope"progress"

data-part"root"

ProgressValue

span

PropType

children?null | ((formattedValue: string | null, value: number | null) → React.ReactNode)

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"progress-value"

data-scope"progress"

data-part"value"