- Invoice #2041 — PDF
- billing@acme.co
- Pay invoice by Friday
Find anything instantly
Search every text, link and image you've copied. Results narrow as you type.
Search components and blocks
What users see when there is nothing to show yet — turn a dead end into a next step.
A friendly placeholder for empty screens with three scenarios (no projects, no search results, inbox zero). A sliding-pill switcher picks the scenario; the content crossfades, then an isometric figure, title, copy, and call-to-action cascade in with a staggered spring. Each scenario has its own figure — an empty tile with a dashed cube waiting to land, a grid of empty slots under a magnifying glass, an empty inbox tray with a green check — that drops in piece by piece and then floats gently. The CTA is the shared MotionButton with hover and press feedback. Needs components/empty-state-figures.tsx alongside.
pnpm dlx shadcn@latest add @ditherui/empty-stateProjects you create will show up here. Start with a blank one or import from a template.
className / ...div propsReact.ComponentProps<"div">—