Components
Progress Circle
A circular progress indicator with SVG ring, any size, customizable color, and optional centered text content.
Installation
bunx @happlyui/cli@latest add progress-circle
Dependencies
Registry dependencies
These are automatically installed when you add this component.
happly-ui-utils
Usage
import * as ProgressCircle from "@/components/ui/progress-circle"
<ProgressCircle.Root value={75}>75%</ProgressCircle.Root>
Examples
Sizes
Progress circles accept any numeric size. Stroke width auto-scales proportionally.
75%
75%
75%
<ProgressCircle.Root size={80} value={75}>75%</ProgressCircle.Root>
<ProgressCircle.Root size={48} value={75}>75%</ProgressCircle.Root>
<ProgressCircle.Root size={16} value={75} />
Values
Progress circles at different completion percentages.
0%
25%
50%
75%
100%
<ProgressCircle.Root value={0}>0%</ProgressCircle.Root>
<ProgressCircle.Root value={50}>50%</ProgressCircle.Root>
<ProgressCircle.Root value={100}>100%</ProgressCircle.Root>
API Reference
ProgressCircle.Root
The main circular progress component.
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 80 | The diameter of the circle in pixels |
strokeWidth | number | size * 0.08 | Override the auto-calculated stroke width |
value | number | 0 | The current progress value |
max | number | 100 | The maximum progress value |
color | string | 'stroke-primary-base' | Tailwind stroke class for the progress ring color |
baseColor | string | 'stroke-bg-soft-200' | Tailwind class for the background ring color |
children | ReactNode | - | Content displayed centered inside the circle |