Empty Pond
Still water: one duck at rest and ripples that are the emptiness rather than decoration on it.
FeedbackServer safe
Preview
No stickers yet
Upload artwork and it lands on the sheet, ready to cut.
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/empty-pondPulls in @duck/theme, @duck/duck-mark. Already installed items are skipped.
Usage
import { EmptyPond } from "@/components/ui/empty-pond"The file lands in components/ui/empty-pond.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 |
|---|---|---|---|
| title | string | - | What is not here. Required. |
| hint | string | - | One line on what to do about it. |
| action | ReactNode | - | The way out — usually a button. |
| compact | boolean | false | Drop the mascot and the ripples, for empty states inside small panels. |
Rules
What keeps this component from turning into noise.
- An empty screen is an invitation. Give it an action, or say why there is nothing to do.
- The float is the viewport's one idle animation while this is on screen. Do not put a second one beside it.
- This is the only place the mascot goes large. Everywhere else it is a 16px glyph.