# Empty

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

- Install: `php artisan blatui:add empty`
- Source: https://blatui.remix-it.com/r/empty.json
- Composer: `composer require gehrisandro/tailwind-merge-laravel`

## resources/views/components/ui/empty.blade.php

```blade
<div data-slot="empty" {{ $attributes->twMerge('flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12') }}>
    {{ $slot }}
</div>
```

## resources/views/components/ui/empty-content.blade.php

```blade
<div data-slot="empty-content" {{ $attributes->twMerge('flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance') }}>
    {{ $slot }}
</div>
```

## resources/views/components/ui/empty-description.blade.php

```blade
<div data-slot="empty-description" {{ $attributes->twMerge('text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4') }}>{{ $slot }}</div>
```

## resources/views/components/ui/empty-header.blade.php

```blade
<div data-slot="empty-header" {{ $attributes->twMerge('flex max-w-sm flex-col items-center gap-2 text-center') }}>
    {{ $slot }}
</div>
```

## resources/views/components/ui/empty-media.blade.php

```blade
@props(['variant' => 'default'])

@php
    $variants = [
        'default' => 'bg-transparent',
        'icon' => "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
    ];
@endphp

<div
    data-slot="empty-media"
    data-variant="{{ $variant }}"
    {{ $attributes->twMerge('mb-2 flex shrink-0 items-center justify-center '.($variants[$variant] ?? $variants['default'])) }}
>
    {{ $slot }}
</div>
```

## resources/views/components/ui/empty-title.blade.php

```blade
<div data-slot="empty-title" {{ $attributes->twMerge('text-lg font-medium tracking-tight') }}>{{ $slot }}</div>
```