Sticker Card
The die-cut sticker: thick border, generous radius, soft glow. Optional iridescent ring, pointer tilt and a corner that peels off the backing.
SurfacesClient component
Preview
Pond Starter
For one developer shipping nights and weekends.
3 projects, 10k monthly requests, community support.
Flock Team
Shared components and review flows for the whole team.
Unlimited projects, SSO, and a private registry.
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/sticker-cardPulls in @duck/theme, @duck/use-holo-pointer. Already installed items are skipped.
Usage
import { StickerCard, StickerCardHeader, StickerCardTitle, StickerCardDescription, StickerCardContent, StickerCardFooter } from "@/components/ui/sticker-card"The file lands in components/ui/sticker-card.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 |
|---|---|---|---|
| holo | boolean | false | Swap the solid border for the iridescent ring. |
| tilt | boolean | false | The card leans toward the pointer. |
| peel | boolean | false | A corner lifts off the backing on hover. |
Rules
What keeps this component from turning into noise.
- Peel and tilt together is a lot. Pick one per card.
- In a grid of cards, at most one carries holo.