Sticker Skeleton
The un-inked sticker: die-cut and already on the sheet, the art just has not printed yet.
FeedbackServer safe
Preview
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/sticker-skeletonPulls in @duck/theme. Already installed items are skipped.
Usage
import { StickerSkeleton, StickerSkeletonText } from "@/components/ui/sticker-skeleton"The file lands in components/ui/sticker-skeleton.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 |
|---|---|---|---|
| shape | line | title | circle | card | line | The cut. Override the size with a className when none of them fit. |
| delay | number | 0 | Milliseconds into the shared wave. Later items sweep later. |
| lines | number | 3 | On StickerSkeletonText: how many lines, staggered 90ms apart, last one short. |
Rules
What keeps this component from turning into noise.
- Stagger the delays. Twelve skeletons each running their own shimmer reads as twelve things loading, not one page arriving.
- Show a skeleton once a wait passes about 300ms. Below that it is a flash, not feedback.