Empty
View on shadcn/uiUse the Empty component to display an empty state.
No messages yet
Your inbox is empty. Start a conversation to see your messages here.
Installation
pnpm dlx shadcn@latest add https://dev.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
Outline
Use the border utility class to create an outline empty state.
Cloud storage empty
Upload files to your cloud storage to access them anywhere.
Background
Use the bg-* utility to add a background 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.
Avatars
Use the EmptyMedia component to display an avatar group in the empty state.
FGGKCS
No team members
Invite your team to collaborate on this project.
Changelog
- 21 July 2026: refined default styling, added explicit "border-border" class