Empty state
A useful next step when there is nothing to show yet.
pnpm dlx shadcn@latest add @uiarc/empty-stateLive · keyboard ready
- Empty lists, zero search results, and first-run views.
- A view that should morph between states, such as empty and success, by changing props.
- Use skeleton while data is still loading.
- Use alert for errors inside a page that still has content.
- Use onboarding-checklist when first-run needs several steps.
Installation
Add Empty state with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/empty-stateAdds the component and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { Search } from "lucide-react";import { Button } from "@/registry/components/button/button";import { EmptyState } from "@/registry/components/empty-state/empty-state"; export function NoResults({ onClear }: { onClear: () => void }) { return ( <EmptyState icon={<Search size={24} />} title="No matches" description="Try a shorter search or clear the filters." action={<Button variant="secondary" onClick={onClear}>Clear filters</Button>} /> );}EmptyState
A centered icon, title, description, and optional action for empty views.
PropTypeDefaultDescription
titleRequiredstring–Headline. A new title rises in while the old one leaves.descriptionRequiredstring–One or two sentences on why it is empty and what to do.actionReactNode–Call to action, usually a button.iconReactNode<Folder />Leading icon. A different icon component crossfades in.classNamestring–Class for the root section.labelstring–Accessible name for the section region.- Renders a section with an h3 title; pass label to name the region.
- The icon is aria-hidden.
- Outgoing copy is hidden from assistive tech while it fades.
- Changing title or description rolls the copy in place while the block height springs to fit.
- A new icon pops in with a short blur.
- Reduced motion swaps copy with a fade and snaps height; the icon's idle animation stops.
- Padding scales with the viewport between fixed bounds, and the description caps at 18rem so lines stay short.
- Actions wrap and center, so two buttons stack on narrow screens.
- One ResizeObserver drives the height spring; the icon's idle animation is CSS and stops under reduced motion.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for empty lists, zero search results, and first-run views. Use skeleton while data is loading.
- Keep it mounted and change its props to morph between states such as empty and success.
The full library index for assistants is at /llms.txt.