Component progress-circle-demo not found in registry.
Installation
pnpm dlx shadcn@latest add progress-circle
Usage
import * as ProgressCircle from "@/registry/radix-ui/ui/progress-circle"
export default function ProgressCircleExample() {
return (
<ProgressCircle.Root value={75} color="primary" size="md">
75%
</ProgressCircle.Root>
)
}Features
- Circular design: Beautiful circular progress indicator with smooth animations
- Color variants: Primary, secondary, danger, success, and warning
- Size options: xs, sm, md, and lg with appropriate proportions
- Flexible content: Support for custom content in the center
- Accessibility: Built-in ARIA attributes for screen readers
- SVG-based: Scalable vector graphics for crisp display at any size
Examples
Basic Progress Circle
A standard progress circle with default styling.
<ProgressCircle.Root value={50}>50%</ProgressCircle.Root>With Color Variants
Use different colors for various contexts.
Component progress-circle-colors not found in registry.
Different Sizes
Choose from various sizes to fit your design needs.
Component progress-circle-sizes not found in registry.
Different Progress Values
Show various completion states.
Component progress-circle-values not found in registry.
Custom Max Values
Use custom ranges for your progress circles.
Component progress-circle-custom-max not found in registry.
Rounded Variants
Show rounded and square end caps.
Component progress-circle-rounded not found in registry.
Custom Content
Add custom content in the center of the circle.
Component progress-circle-custom-content not found in registry.
Different Sizes
Choose from various sizes to fit your design needs.
<div className="flex gap-4">
<ProgressCircle.Root value={50} size="xs">
50%
</ProgressCircle.Root>
<ProgressCircle.Root value={50} size="sm">
50%
</ProgressCircle.Root>
<ProgressCircle.Root value={50} size="md">
50%
</ProgressCircle.Root>
<ProgressCircle.Root value={50} size="lg">
50%
</ProgressCircle.Root>
### Different Progress Values
Show various completion states.
```tsx showLineNumbers
<div className="flex gap-4">
<ProgressCircle.Root value={25}>25%</ProgressCircle.Root>
<ProgressCircle.Root value={50}>50%</ProgressCircle.Root>
<ProgressCircle.Root value={75}>75%</ProgressCircle.Root>
<ProgressCircle.Root value={100}>100%</ProgressCircle.Root>
</div>Custom Max Values
Use custom ranges for your progress circles.
<div className="flex gap-4">
<ProgressCircle.Root value={3} max={5}>
3/5
</ProgressCircle.Root>
<ProgressCircle.Root value={7} max={10}>
7/10
</ProgressCircle.Root>
<ProgressCircle.Root value={15} max={20}>
15/20
</ProgressCircle.Root>
</div>Custom Content
Add custom content in the center of the circle.
<div className="flex gap-4">
<ProgressCircle.Root value={80} color="success">
<div className="flex flex-col items-center">
<span className="text-2xl">✓</span>
<span className="text-xs">Complete</span>
</div>
</ProgressCircle.Root>
<ProgressCircle.Root value={65} color="warning">
<div className="text-center">
<div className="font-bold">65%</div>
<div className="text-xs">In Progress</div>
</div>
</ProgressCircle.Root>
<ProgressCircle.Root value={40} color="primary" />
</div>