Components
Progress Circle
A circular progress indicator with SVG ring, multiple sizes, 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.
tvhapply-ui-utils
Usage
import * as ProgressCircle from "@/components/ui/progress-circle"
<ProgressCircle.Root value={75}>75%</ProgressCircle.Root>
Examples
Sizes
Progress circles in all sizes (80, 72, 64, 56, 48) with percentage labels. Smaller sizes omit text.
0%
25%
50%
75%
100%
0%
25%
50%
75%
100%
0%
25%
50%
75%
100%
0%
25%
50%
75%
100%
<ProgressCircle.Root value={50}>50%</ProgressCircle.Root>
<ProgressCircle.Root size="56" value={75}>75%</ProgressCircle.Root>
<ProgressCircle.Root size="48" value={100} />
API Reference
ProgressCircle.Root
The main circular progress component.
| Prop | Type | Default | Description |
|---|---|---|---|
size | '80' | '72' | '64' | '56' | '48' | '44' | '80' | The size of the circle in pixels |
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 |
children | ReactNode | - | Content displayed centered inside the circle |