Progress

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

"use client"

import * as React from "react"

Installation


pnpm dlx shadcn@latest add progress

import { Progress } from "@/components/ui/progress"

<Progress value={33} />

Use a Field component to add a label to the progress bar.

import { Field, FieldLabel } from "@/components/ui/field"
import { Progress } from "@/components/ui/progress"

A progress bar that can be controlled by a slider.

"use client"

import * as React from "react"

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

"use client"

import * as React from "react"

See the Radix UI Progress documentation.

On This Page

Deploy your StyleDriven UI app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.