blatui

Components

Empty

An empty state for when there is no data to display.

php artisan blatui:add empty
No projects yet
You haven't created any projects yet. Get started by creating your first project.
<x-ui.empty class="w-full max-w-md">
    <x-ui.empty-header>
        <x-ui.empty-media variant="icon">
            <x-lucide-folder-open />
        </x-ui.empty-media>
        <x-ui.empty-title>No projects yet</x-ui.empty-title>
        <x-ui.empty-description>
            You haven&#39;t created any projects yet. Get started by creating your first project.
        </x-ui.empty-description>
    </x-ui.empty-header>
    <x-ui.empty-content>
        <x-ui.button><x-lucide-plus /> Create project</x-ui.button>
    </x-ui.empty-content>
</x-ui.empty>

Search

No results found
We couldn't find anything matching your search. Try a different term.
<x-ui.empty class="w-full max-w-md">
    <x-ui.empty-header>
        <x-ui.empty-media variant="icon"><x-lucide-search /></x-ui.empty-media>
        <x-ui.empty-title>No results found</x-ui.empty-title>
        <x-ui.empty-description>We couldn't find anything matching your search. Try a different term.</x-ui.empty-description>
    </x-ui.empty-header>
    <x-ui.empty-content>
        <div class="flex w-full max-w-xs items-center gap-2">
            <x-ui.input placeholder="Search again..." aria-label="Search" />
            <x-ui.button variant="outline">Search</x-ui.button>
        </div>
    </x-ui.empty-content>
</x-ui.empty>

With Link

No backups configured
Connect a storage provider to start backing up your data automatically.
Learn more 
<x-ui.empty class="w-full max-w-md">
    <x-ui.empty-header>
        <x-ui.empty-media variant="icon"><x-lucide-cloud /></x-ui.empty-media>
        <x-ui.empty-title>No backups configured</x-ui.empty-title>
        <x-ui.empty-description>Connect a storage provider to start backing up your data automatically.</x-ui.empty-description>
    </x-ui.empty-header>
    <x-ui.empty-content>
        <x-ui.button>Connect storage</x-ui.button>
        <x-ui.button variant="link" href="#">Learn more</x-ui.button>
    </x-ui.empty-content>
</x-ui.empty>

API Reference

Props, slots and exposed methods for <x-ui.empty>.

Slots

Slot Description
default The empty-state content. Compose it from the sub-components: <x-ui.empty-header> (wraps <x-ui.empty-media>, <x-ui.empty-title> and <x-ui.empty-description>) followed by <x-ui.empty-content> for actions such as a button or link.