Utility
AI
Terminal
Installation
pnpm dlx shadcn@latest add https://termcn.dev/r/progress-circle.json
Usage
import { ProgressCircle } from "@/components/ui/progress-circle";<ProgressCircle value={75} size="sm" label="Memory" showPercent />Examples
Sizes
Terminal
import { Box } from "ink";
import { ProgressCircle } from "@/registry/ui/progress-circle";
export default function ProgressCircleSizes() {
return (
<Box gap={2}>
<ProgressCircle value={60} size="sm" />
<ProgressCircle value={45} size="md" label="CPU" />
<ProgressCircle value={88} size="lg" showPercent />
</Box>
);
}
API Reference
ProgressCircle
| Prop | Type | Default |
|---|---|---|
value | number | required |
size | "sm" | "md" | "lg" | "sm" |
color | string | undefined |
label | string | undefined |
showPercent | boolean | false |