ProgressBar & ProgressRing

ProgressBar

Default60%
80%

ProgressRing

75%
40%

ProgressCard

Project progress

70%

Tasks completed

90%

Variants

Info45%
Warning30%
Error20%

How to use

Use ProgressBar, ProgressRing, or ProgressCard. Copy the examples below.

1. Import

tsx
import { ProgressBar, ProgressRing, ProgressCard } from "@/app/components/ui";

2. Basic usage

tsx
<ProgressBar value={60} label="Default" />
<ProgressBar value={80} variant="success" />

<ProgressRing value={75} />
<ProgressRing value={40} variant="success" size={48} />