No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
<Empty Class="w-full max-w-md">
<EmptyHeader>
<EmptyMedia Variant="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 7a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<path d="M3 10h18" />
</svg>
</EmptyMedia>
<EmptyTitle>No Projects Yet</EmptyTitle>
<EmptyDescription>
You haven't created any projects yet. Get started by creating your first project.
</EmptyDescription>
</EmptyHeader>
<EmptyContent Class="flex-row justify-center gap-2">
<Button>Create Project</Button>
<Button Variant="@Button.ButtonVariant.Outline">Import Project</Button>
</EmptyContent>
<Button Variant="@Button.ButtonVariant.Link" Size="@Button.ButtonSize.Sm" Href="#" Class="text-muted-foreground">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M7 7h10v10" />
<path d="M7 17 17 7" />
</svg>
</Button>
</Empty>Installation
Install the empty component using the command or manual steps.
blazor-shadcn add emptyUsage
@using ShadcnBlazor.Components.UI<Empty Class="w-full max-w-md">
<EmptyHeader>
<EmptyMedia Variant="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 7a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<path d="M3 10h18" />
</svg>
</EmptyMedia>
<EmptyTitle>No Projects Yet</EmptyTitle>
<EmptyDescription>
You haven't created any projects yet. Get started by creating your first project.
</EmptyDescription>
</EmptyHeader>
<EmptyContent Class="flex-row justify-center gap-2">
<Button>Create Project</Button>
<Button Variant="@Button.ButtonVariant.Outline">Import Project</Button>
</EmptyContent>
</Empty>Anatomy
The Empty family is a small composition surface for titles, supporting text, optional media, and follow-up actions.
<Empty>
<EmptyHeader>
<EmptyMedia Variant="icon">...</EmptyMedia>
<EmptyTitle>Title</EmptyTitle>
<EmptyDescription>Description</EmptyDescription>
</EmptyHeader>
<EmptyContent>
...
</EmptyContent>
</Empty>Empty centers the empty state content and sets the overall spacing.
EmptyHeader groups the media, title, and description.
EmptyContent is intended for actions or secondary details below the header.
Examples
Outline
Cloud Storage Empty
Upload files to your cloud storage to access them anywhere.
<Empty Class="w-full max-w-md border">
<EmptyHeader>
<EmptyMedia Variant="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 19a4 4 0 0 1 0-8 5 5 0 0 1 9.7-1A4.5 4.5 0 1 1 18 19Z" />
</svg>
</EmptyMedia>
<EmptyTitle>Cloud Storage Empty</EmptyTitle>
<EmptyDescription>
Upload files to your cloud storage to access them anywhere.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Sm">Upload Files</Button>
</EmptyContent>
</Empty>Avatar Group
No Team Members
Invite your team to collaborate on this project.
<Empty Class="w-full max-w-md">
<EmptyHeader>
<EmptyMedia>
<div class="flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
<Avatar>
<AvatarImage Src="https://github.com/shadcn.png" Alt="shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage Src="https://github.com/maxleiter.png" Alt="maxleiter" />
<AvatarFallback>ML</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage Src="https://github.com/evilrabbit.png" Alt="evilrabbit" />
<AvatarFallback>ER</AvatarFallback>
</Avatar>
</div>
</EmptyMedia>
<EmptyTitle>No Team Members</EmptyTitle>
<EmptyDescription>
Invite your team to collaborate on this project.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button Size="@Button.ButtonSize.Sm">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14" />
<path d="M12 5v14" />
</svg>
Invite Members
</Button>
</EmptyContent>
</Empty>Background
No Notifications
You're all caught up. New notifications will appear here.
<Empty Class="min-h-[280px] w-full max-w-md bg-muted/30">
<EmptyHeader>
<EmptyMedia Variant="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10.3 21a1 1 0 0 0 3.4 0" />
<path d="M4.3 18h15.4" />
<path d="M18 8a6 6 0 1 0-12 0c0 7-3 8-3 10h18c0-2-3-3-3-10" />
</svg>
</EmptyMedia>
<EmptyTitle>No Notifications</EmptyTitle>
<EmptyDescription Class="max-w-xs text-pretty">
You're all caught up. New notifications will appear here.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button Variant="@Button.ButtonVariant.Outline">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 2v6h-6" />
<path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
<path d="M3 22v-6h6" />
<path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
</svg>
Refresh
</Button>
</EmptyContent>
</Empty>API Reference
Empty
EmptyMedia
EmptyHeader,
EmptyTitle,
EmptyDescription, and
EmptyContent each accept
Class and
ChildContent.