Progress
Linear and circular progress on a spring, with an optional indeterminate sweep.
- Category: Feedback
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Progress
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | 0–100. Omit for indeterminate. |
label | string | — | |
showValue | boolean | false | |
ProgressRing size / stroke | number / number | 48 / 4 |
About Progress
Progress gives you linear bars and circular rings that move on springs instead of jumping, plus an indeterminate sweep for work of unknown length. It reads well at any size.
Progress is a feedback component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Progress
- Upload and download progress.
- Onboarding and profile completion.
- Course and quiz progress.
- Background jobs in dashboards.
How it works
Both shapes are progressbar roles with aria-valuenow, so the value is announced. The fill is a transform on a spring, and the indeterminate sweep is pure CSS.
State changes are announced through live regions or the right ARIA roles, so screen-reader users hear what sighted users see. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Progress
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change label, showValue, size, stroke live, and the Code tab updates to match, so the snippet you copy already carries your values.
- value (number): 0–100. Omit for indeterminate.
- label (string).
- showValue (boolean, default false).
- ProgressRing size / stroke (number / number, default 48 / 4).
Goes well with Progress
Progress is already composed into 4 ready-made sections, so you can see it in context or install the whole block.
- Features Tabs: Features section
- Pricing Donation: Pricing section
- Pricing Lifetime: Pricing section
- Event Tickets: Events section
- Loader: Four quiet React loaders, dots, bars, orbit and pulse, that announce themselves
- Status Badge: A React status badge that morphs between states with a pulsing live dot
- Skeleton: React skeleton loaders with a soft sweep and a blur crossfade to real content
- Alert: Animated React alerts for info, success, warning and error that collapse smoothly
- Typing Indicator: A React typing indicator: a bubble with rippling dots that tells screen readers who is typing
Install Progress
npx shadcn@latest add https://charcoalui.com/r/progress.jsonProgress is free and MIT licensed. The command copies progress.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Thinking Orb, a Pro piece: A sphere of dots that shows an AI is busy, with nine motions for nine kinds of busy: working, searching, solving, listening, connecting, composing, breathing, weaving and shaping. States morph into each other; dots can lean towards the cursor.
Frequently asked questions
- How do I install Progress?
- Run npx shadcn@latest add https://charcoalui.com/r/progress.json. The shadcn CLI copies progress.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Progress free for commercial use?
- Yes. Progress is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Progress work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Progress?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Progress's props and source and get_install_command returns the exact command.