Progress

Displays a bar or circular ring that shows how far a task or quota has progressed toward completion, with optional label and value text.

Progress

Copying

2.5GB of 5GB

Rendering

Frame 60/600

Storage

Steps

Installation

pnpm dlx shadcn@latest add @sortui/progress

Usage

import {
  Progress,
  ProgressCircle,
  ProgressFooter,
  ProgressTrack,
  ProgressIndicator,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"

Examples

Controlled

Launch checklist

Before you go live

Five things worth doing on the day you ship.

Circle

75%x

Tailwind CSS

96%x

CSS

25%x

JavaScript

Ship your next project this week

Get the full Figma kit, the code of 180+ sections and every future update for one payment.

Get Pro Access