New

Progress

PreviousNext

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

Radix UIBase UI
"use client"

import * as React from "react"

Installation

pnpm dlx shadcn@latest add progress

Usage

import { Progress } from "@/components/ui/progress"
<Progress value={33} />

Examples

Label

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

Upload progress
import {
  Progress,
  ProgressLabel,

Controlled

A progress bar that can be controlled by a slider.

"use client"

import * as React from "react"

RTL

To enable RTL support in StyleDriven UI, see the RTL configuration guide.

تقدم الرفع
"use client"

import * as React from "react"

API Reference

See the Base UI Progress documentation.