Card skeleton with an optional avatar placeholder and shimmer lines of varied widths.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Progress12 } from "@/components/beste/piece/progress12";
<Progress12
lines={3}
withAvatar={true}
/>Three staggered pulsing dots inside a pill, paired with an optional label.
Sunset gradient card with a flame glyph beside a big day count and a longest-streak caption.
Trophy tile beside a level badge and an XP fraction over a sunset gradient fill bar.
Single horizontal bar divided into tinted segments by percentage, with a legend row below.
Numbered step dots connected by a line. Completed steps fill emerald with a check.
Drive icon beside a label, a thin usage bar, and a used-of-total caption that retints as it fills.