Search

Search components and blocks

Sign in

Progress

The Radix Progress indicator with its fill driven by a motion spring instead of a CSS transition, so jumps between values settle with a little weight instead of snapping.

pnpm dlx shadcn@latest add @ditherui/progress
40%

Install

$ pnpm dlx shadcn@latest add @ditherui/progress

Props

valuenumber0
classNamestring—

When to use the progress bar

Use it to show completion. It is the Radix Progress with its fill driven by a motion spring.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components