Progress

Displays an indicator showing the progress of a task.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/progress.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Values

0%

25%

50%

75%

100%

Use Case: File Upload

Uploading document.pdf68%

Usage

How to use this component in your code.

<Progress value={0} />
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />