Getting Started
UI Library
- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
Displays a partially filled bar indicating how far a value has progressed toward a maximum. Supports dynamic ranges, value formats, semantic colors, and grid layouts.
Basic Usage
Project Progress
65%
Project completion status
Value Formats
Choose how to display the progress value: percentage, fraction, value, or custom.
Percentage Format
75%
Shows as 75%
Fraction Format
75 / 100
Shows as 75 / 100
Value Format
75
Shows as 75
Custom Min/Max Ranges
Set custom minimum and maximum values for dynamic progress bars.
Custom Min/Max
120 / 150
Range: 50-150, Value: 120
Goal Progress
8 / 12
8 out of 12 completed
Custom Value Formatter
Use a custom formatter for complete control over value display.
Downloads
4,250 / 5,000
Total downloads this month
Storage Used
75.5 GB
Server capacity
Color Variants
Use semantic colors to indicate different states or meanings.
Default Color
60%
Uses primary theme color
Success Color
85%
Green for success states
Warning Color
55%
Yellow for warning states
Danger Color
25%
Red for critical states
Dashboard Example
Create comprehensive dashboards with progress tracking.
Project Completion
78%
Q4 2024 Goals
Budget Used
62%
Remaining: $45,000
Team Velocity
85%
Sprint 12 metrics
Code Quality
91%
Technical debt ratio
Customer Satisfaction
88%
NPS Score
Server Uptime
99.9%
Last 30 days
Interactive Progress
Update progress dynamically with state management.
Interactive Progress
45%
Click buttons to adjust progress
API Reference
ProgressItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Current progress value |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
title | string | - | Progress title |
description | string | - | Supporting description text |
showValue | boolean | true | Show/hide the value display |
valueFormat | "percentage" | "fraction" | "value" | "custom" | "percentage" | Value display format |
customValueFormatter | (value, min, max) => string | - | Custom value formatter function |
variant | "card" | "outline" | "ghost" | "minimal" | "card" | Visual style variant |
size | "sm" | "md" | "lg" | "md" | Size of components |
valueVariant | "default" | "primary" | "muted" | "gradient" | "default" | Value text styling |
barVariant | "default" | "primary" | "success" | "warning" | "danger" | "muted" | "default" | Progress bar color |
animated | boolean | true | Enable smooth transitions |
onClick | () => void | - | Click handler (makes it interactive) |
ariaLabel | string | - | Custom accessibility label |
className | string | - | Additional CSS classes |
classNames | object | - | Granular CSS class overrides |
ProgressCollection Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ProgressItemProps[] | - | Array of progress items |
layout | "stack" | "grid" | "stack" | Layout style |
columns | 1 | 2 | 3 | 1 | Grid columns (when layout="grid") |
gap | "sm" | "md" | "lg" | "md" | Gap between items |
variant | "card" | "outline" | "ghost" | "minimal" | "card" | Shared variant for all items |
size | "sm" | "md" | "lg" | "md" | Shared size for all items |
valueVariant | "default" | "primary" | "muted" | "gradient" | "default" | Shared value styling |
barVariant | "default" | "primary" | "success" | "warning" | "danger" | "muted" | "default" | Shared bar color |
animated | boolean | true | Enable animations for all items |
onItemClick | (item, index) => void | - | Click handler for all items |
className | string | - | Additional CSS classes |