Empty
Empty state layout with optional icon, title, description, and action content.
No results found
Try adjusting your search or filters to find what you're looking for.
<.empty></.empty>Examples
Icon variant
Media rendered as a small icon badge via variant="icon".
No results found
Try adjusting your search or filters to find what you're looking for.
<.empty>
<.empty_header>
<.empty_media variant="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
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 5 7 7-7 7" />
</svg>
</.empty_media>
<.empty_title>No results found</.empty_title>
<.empty_description>
Try adjusting your search or filters to find what you're looking for.
</.empty_description>
</.empty_header>
<.empty_content>
<button class="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow-xs">
Clear filters
</button>
</.empty_content>
</.empty>Default media
Larger illustration or icon without the badge treatment.
No items yet
Get started by creating your first item.
<.empty>
<.empty_header>
<.empty_media>
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="text-muted-foreground"
>
<path d="M5 3h14" /><path d="M17.5 3v16.5M6.5 3v16.5" /><path d="M5 21h14" />
</svg>
</.empty_media>
<.empty_title>No items yet</.empty_title>
<.empty_description>
Get started by creating your first item.
</.empty_description>
</.empty_header>
</.empty>Props
| Name | Type | Default | Values |
|---|---|---|---|
| class | :string | ||
| rest | :global | ||
| inner_block (slot) | :slot |