Sunset gradient card with a flame glyph beside a big day count and a longest-streak caption.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Progress10 } from "@/components/beste/piece/progress10";
<Progress10
streak={27}
longest={42}
longestLabel="Longest"
longestSuffix="days"
label="Day streak"
tone="emerald"
/>Trophy tile beside a level badge and an XP fraction over a sunset gradient fill bar.
Circular SVG ring with a centered percentage. Tone sets the stroke color.
Card skeleton with an optional avatar placeholder and shimmer lines of varied widths.
Labelled progress bar with a percent readout above and a tonal fill.
Clinic setup
3/5An onboarding checklist with a completion bar, a done count, and steps that strike through as they are finished.
Single horizontal bar divided into tinted segments by percentage, with a legend row below.