Emerald filled circle with a bold check inside, a soft pinging ring, and a title plus description beneath.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Progress9 } from "@/components/beste/piece/progress9";
<Progress9
title="All set"
description="Your payment has cleared"
/>Numbered step dots connected by a line. Completed steps fill emerald with a check.
Circular SVG ring with a centered percentage. Tone sets the stroke color.
Labelled progress bar with a percent readout above and a tonal fill.
Three staggered pulsing dots inside a pill, paired with an optional label.
Five stacked rows mapping 5–1 stars to amber fill bars and the percentage for each tier.
Single horizontal bar divided into tinted segments by percentage, with a legend row below.