Empty states
Four empty states in one illustration whose shapes morph between scenes as you switch tabs.
pnpm dlx shadcn@latest add @uiarc/empty-statesNo results for “Q3 roadmap”
Two filters are on: owner is Emma Collins and status is archived.
- A reference for no results, offline, inbox zero, and 404 moments with one shared illustration style.
- Extracting one scene as a richer empty state for a key screen.
- Use empty-state for a simple empty state with an icon, text, and action.
- Use onboarding-illustration for first-run screens that teach the product.
- Use skeleton while content is still loading.
Installation
Add Empty states with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/empty-statesAdds the block and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
Usage
Use this for no results, offline, inbox zero and missing page moments. Wire each action to your real filter reset, retry, refresh or search; the preview simulates them locally.
import { EmptyStates } from "@/components/arc/blocks/empty-states/empty-states"; export default function EmptyGallery() { return ( <main> <EmptyStates /> </main> );}EmptyStates
Four empty states (no results, offline, inbox zero, missing page) in one illustration that morphs between scenes via tabs, each with a simulated action. Scene copy is in empty-states.tsx and shapes in empty-states-art.ts.
No props.
- LeftorRight
- Move between scene tabs (wraps around).
- HomeorEnd
- Jump to the first or last scene.
- Scenes use role="tablist", "tab" and "tabpanel" with aria-selected and aria-controls.
- The illustration is a role="img" labelled by the scene; a polite live region reports action results.
- Each shape morphs its path to the next scene with slight per-shape delays, and the tab indicator glides with a layoutId.
- Reduced motion swaps scenes with a short fade and no morph.
- The block is a container query root; from a 560px container the title steps up a size.
- Pointer parallax only turns on for hover-capable fine pointers, so touch devices get a still illustration.
- Shape morphs run on a small requestAnimationFrame loop that stops as soon as every shape settles.
- A ResizeObserver springs the copy height when scenes change.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use as a reference for no results, offline, inbox zero or 404 moments; usually you extract one scene rather than ship the tabbed gallery.
- Actions (clear filters, retry, refresh, search) are simulated; wire them to your real handlers.
- For a single simple empty state, prefer the empty-state component.
The full library index for assistants is at /llms.txt.