Progress Component

A progress bar component for displaying task completion status. Perfect for loading states, file uploads, and step indicators.

Basic Progress

A simple progress bar with different completion levels.

0%Progress100%
25%Progress100%
50%Progress100%
75%Progress100%
100%Progress100%

Sizes

Different progress bar sizes for various contexts.

Small

Medium

Large

Colors

Beautiful color options from the Catppuccin palette.

Mauve

Blue

Pink

Green

Teal

Red

Yellow

Lavender

Variants

Different progress bar styles for various use cases.

Default

Success

Warning

Destructive

Real-world Examples

Common progress bar patterns used in applications.

File Upload

Uploading document.pdf

Please wait while your file is being uploaded...

7.5 MB of 10 MB75%

Installation Progress

Installing Dependencies

Setting up your development environment...

Installing packages3/5
Installing: @radix-ui/react-dialog, @radix-ui/react-dropdown-menu...

Storage Usage

Storage Overview

Your current storage usage across all projects

Documents2.1 GB
Images1.8 GB
Videos3.2 GB
Other0.9 GB

Step Progress

Setup Wizard

Complete these steps to get started

Step 2 of 450%
✓ Account created • ✓ Profile setup • ⏳ Preferences • ⏳ Finalize

Installation

npx shadcn@latest add https://catppuccin-components.vercel.app/r/progress.json