Sticker Progress
The peel: solid vinyl behind the edge, cut-line dashes ahead of it.
FeedbackServer safe
Preview
Uploading artwork28%
Cutting the sheet
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/sticker-progressPulls in @duck/theme. Already installed items are skipped.
Usage
import { StickerProgress } from "@/components/ui/sticker-progress"The file lands in components/ui/sticker-progress.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | 0 to max. Omit it entirely for the indeterminate sweep. |
| max | number | 100 | Upper bound. |
| label | string | - | Also becomes the accessible name. |
| showValue | boolean | false | Print the percentage beside the label, in tabular figures. |
Rules
What keeps this component from turning into noise.
- No holo variant. A progress bar is on screen for the whole wait, so it is the worst place to spend the viewport's one holo element.
- Give it a real value as soon as you have one. Indeterminate is for genuinely unknown length, not for laziness.