Empty
View on shadcn/uiAn empty state component to display when there's no data or content to show.
No messages yet
Your inbox is empty. Start a conversation to see your messages here.
Installation
pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/empty.jsonUsage
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty";<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<Icon />
</EmptyMedia>
<EmptyTitle>No items found</EmptyTitle>
<EmptyDescription>
Get started by creating your first item.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button>Create item</Button>
</EmptyContent>
</Empty>Examples
With avatars
Display user avatars to emphasize team collaboration or social features.
JDASMK
Invite your team
Collaborate with your team members to get more done together. Invite them to join your workspace.
With background
Use a background colour to draw attention to the empty state.
Ready to launch?
Deploy your application to production with just one click. Your project is configured and ready to go live.
With outline
Use a border outline for a more prominent empty state.
Get started with ideas
Create your first project idea and start turning your vision into reality. We'll guide you through every step.