Search

Search components and blocks

Sign in

Empty State Blocks

What users see when there is nothing to show yet — turn a dead end into a next step.

Empty State

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-state

No projects yet

Projects you create will show up here. Start with a blank one or import from a template.

Install

$ pnpm dlx shadcn@latest add @ditherui/empty-state

Props

className / ...div propsReact.ComponentProps<"div">—

Suggested components