Empty States
A small drawn scene, a title, a line and the one action that fills the space. The drawings use the theme's greys, so they work in light and dark, and each has one quiet loop that plays only while it is on screen and stops under reduced motion.
The decision inside it
A quiet drawing and a loud button
The scene is decoration, hidden from screen readers; the words carry the meaning. Only one detail in each drawing is in the foreground colour, so the eye goes from the picture to the action, not around the picture.
When to use it
Use Empty States for a page or panel with nothing in it yet, a search with no results, an inbox at zero, a chart with no data, no agents yet, a page you can't see, or a 404: a drawn scene, a title, a line and one action. Use Empty & Loading States (State) for errors, loading and plain icon-only empties.
Installation
How you get it
Paste this into Claude Code, Cursor, Codex or any coding agent. It installs the file and uses it as it is, instead of writing a new one.
Use Layro's Empty States for this.
Install it: npx shadcn@latest add @layro/empty-states
(the @layro registry is set up in components.json, with LAYRO_KEY in .env.local)
Import it from @/components/ui/empty-states.
Do not rewrite or restyle it. Pass my data through its props
and keep its built-in states.For the full brief with every prop and the mistakes assistants usually make, use Copy prompt above. Free components install through the @layro registry with your CLI token: see the Namespaced tab.
Usage
import { FolderPlus } from "lucide-react";
import { EmptyState } from "@/components/ui/empty-states";
export function ProjectsEmpty({ onCreate }: { onCreate: () => void }) {
return (
<EmptyState
illustration="projects"
title="No projects yet"
description="A project keeps a deal's documents, signers and reminders together."
primaryAction={{ label: "New project", icon: <FolderPlus />, onClick: onCreate }}
secondaryAction={{ label: "Import from Drive", href: "/import" }}
/>
);
}API reference
“Copy prompt” above puts a full brief on your clipboard — install command, dependencies, props, and the mistakes an assistant usually makes with this component.
Props
Read from the component’s own TypeScript interface when the site is built, so this table cannot drift from the file you install.
| Prop | Type | Notes |
|---|---|---|
illustrationrequired | EmptyIllustrationName | React.ReactNode | One of the seven drawn scenes, or your own node. |
titlerequired | React.ReactNode | — |
description | React.ReactNode | — |
primaryAction | EmptyStateAction | The one action that fills the space. Drawn as the primary button. |
secondaryAction | EmptyStateAction | A quieter way forward: docs, an import, a link home. |
size | "sm" | "md" | "md" (default) for a page; "sm" for a panel or a card. |
framed | boolean | Draw a dashed frame: for an empty region inside a page. |
animate | boolean | Play the scene's loop. Default true; always still under reduced motion. |
headingLevel | 2 | 3 | 4 | Heading level for the title. Default 2. |
Dependencies
npm packages
clsxframer-motiontailwind-mergeLayro foundations, installed alongside it
layro-themebuttonStates
All of them are drawn by the component. None is left for you to design.
- No projects
- No results
- Inbox zero
- No data
- No agents
- Locked
- 404
- In a panel
Accessibility
- Keyboard reachable throughout, in visual order
- Focus trapped in overlays, Escape closes them
- Focus returns to whatever opened it
- Live regions announce what changed, not that something did
- Honours prefers-reduced-motion
Responsive behavior
- Sizes to its container, not the viewport
- Usable from 320px up
- Pointer-based interaction, so trackpad and touch both work
- No hover-only affordances
Used in a screenAll screens
Lifetime access
Every component, and everything we ship next.
- All 232 components, source included
- Every template, and everything released after you buy
- shadcn CLI or download — React 18/19, Tailwind v4
- One payment. No subscription.
More in Data & feedbackAll Data & feedback components
Empty & Loading States
Empty, error, success and loading states, plus skeletons.
Alert
An inline notice in five tones, with one action and an optional close.
Progress Bar
A progress bar, determinate or not, grey until colour means something.
Progress Circle
A progress ring for tight spots, from a 16px spinner to a step counter.
Dashboard
A whole overview screen: KPIs, trend, breakdown, comparison and a ranked list on one date range.
Breakdown Chart
A stacked bar chart you can re-cut by measure, period and segment, with a linked table.