Empty
Empty state component family with icon media, title, description, and CTA slot. Server-compatible plain markup.
Preview
No results found
We could not find anything matching your search. Try adjusting your filters or search terms.
Installation
bash
npx shadcn@latest add @layout/emptyUsage
tsx
import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from "@/registry/layout/empty/empty";Examples
Empty inbox
Your inbox is empty
New messages from your team will appear here.
Create your first document
No documents yet
Create your first document to get started with your project.
Guidelines for AI agents
Use Empty as the outer wrapper. EmptyHeader groups the media, title, and description. EmptyMedia wraps a lucide icon (size-6) in a square bg-muted rounded container. EmptyContent holds action buttons below the header. Always include EmptyDescription to explain the empty state and guide the user's next action.
Never
- Nevershow Empty during initial loading; use Skeleton instead and only render Empty once the data fetch confirms zero results
- Neverplace EmptyContent outside of Empty; it relies on the parent's flex-col layout
- Neveruse EmptyMedia for decorative images that do not represent the missing entity type
- Neveromit EmptyTitle; a blank media icon alone does not convey enough information
Tokens consumed
--layout-muted--layout-muted-fg--layout-radius