blatui

Components

Item

A flexible component for displaying content with media, title, and actions.

php artisan blatui:add item
Notifications

You have 3 unread messages.

<div class="flex w-full max-w-md flex-col gap-6">
    <x-ui.item variant="outline">
        <x-ui.item-media variant="icon">
            <x-lucide-bell-ring />
        </x-ui.item-media>
        <x-ui.item-content>
            <x-ui.item-title>Notifications</x-ui.item-title>
            <x-ui.item-description>You have 3 unread messages.</x-ui.item-description>
        </x-ui.item-content>
        <x-ui.item-actions>
            <x-ui.button variant="outline" size="sm">View</x-ui.button>
        </x-ui.item-actions>
    </x-ui.item>
</div>

Group

SC
Sofia Carter

[email protected]

JD
Jackson Doe

[email protected]

AB
Amelia Bell

[email protected]

@php
    $people = [
        ['name' => 'Sofia Carter', 'email' => '[email protected]', 'initials' => 'SC'],
        ['name' => 'Jackson Doe', 'email' => '[email protected]', 'initials' => 'JD'],
        ['name' => 'Amelia Bell', 'email' => '[email protected]', 'initials' => 'AB'],
    ];
@endphp
<x-ui.item-group class="w-full max-w-md rounded-lg border">
    @foreach ($people as $i => $p)
        <x-ui.item>
            <x-ui.item-media>
                <x-ui.avatar><x-ui.avatar-fallback>{{ $p['initials'] }}</x-ui.avatar-fallback></x-ui.avatar>
            </x-ui.item-media>
            <x-ui.item-content>
                <x-ui.item-title>{{ $p['name'] }}</x-ui.item-title>
                <x-ui.item-description>{{ $p['email'] }}</x-ui.item-description>
            </x-ui.item-content>
            <x-ui.item-actions>
                <x-ui.button variant="ghost" size="icon-sm" aria-label="Options for {{ $p['name'] }}"><x-lucide-more-horizontal aria-hidden="true" /></x-ui.button>
            </x-ui.item-actions>
        </x-ui.item>
        @if ($i < count($people) - 1)
            <x-ui.item-separator />
        @endif
    @endforeach
</x-ui.item-group>

Link

Account
Billing
Security
 
{{-- Clickable item rows (rendered as links) with a trailing chevron. --}}
<x-ui.item-group class="w-full max-w-md rounded-lg border">
    <x-ui.item href="#" class="hover:bg-accent transition-colors">
        <x-ui.item-media variant="icon"><x-lucide-user /></x-ui.item-media>
        <x-ui.item-content><x-ui.item-title>Account</x-ui.item-title></x-ui.item-content>
        <x-ui.item-actions><x-lucide-chevron-right class="text-muted-foreground size-4" /></x-ui.item-actions>
    </x-ui.item>
    <x-ui.item-separator />
    <x-ui.item href="#" class="hover:bg-accent transition-colors">
        <x-ui.item-media variant="icon"><x-lucide-credit-card /></x-ui.item-media>
        <x-ui.item-content><x-ui.item-title>Billing</x-ui.item-title></x-ui.item-content>
        <x-ui.item-actions><x-lucide-chevron-right class="text-muted-foreground size-4" /></x-ui.item-actions>
    </x-ui.item>
    <x-ui.item-separator />
    <x-ui.item href="#" class="hover:bg-accent transition-colors">
        <x-ui.item-media variant="icon"><x-lucide-shield /></x-ui.item-media>
        <x-ui.item-content><x-ui.item-title>Security</x-ui.item-title></x-ui.item-content>
        <x-ui.item-actions><x-lucide-chevron-right class="text-muted-foreground size-4" /></x-ui.item-actions>
    </x-ui.item>
</x-ui.item-group>

Variants

Default

A transparent item with no border.

Outline

An item with a visible border.

Muted

An item on a muted surface.

<div class="flex w-full max-w-md flex-col gap-3">
    <x-ui.item variant="default">
        <x-ui.item-media variant="icon"><x-lucide-bell-ring /></x-ui.item-media>
        <x-ui.item-content>
            <x-ui.item-title>Default</x-ui.item-title>
            <x-ui.item-description>A transparent item with no border.</x-ui.item-description>
        </x-ui.item-content>
    </x-ui.item>
    <x-ui.item variant="outline">
        <x-ui.item-media variant="icon"><x-lucide-folder /></x-ui.item-media>
        <x-ui.item-content>
            <x-ui.item-title>Outline</x-ui.item-title>
            <x-ui.item-description>An item with a visible border.</x-ui.item-description>
        </x-ui.item-content>
    </x-ui.item>
    <x-ui.item variant="muted">
        <x-ui.item-media variant="icon"><x-lucide-settings /></x-ui.item-media>
        <x-ui.item-content>
            <x-ui.item-title>Muted</x-ui.item-title>
            <x-ui.item-description>An item on a muted surface.</x-ui.item-description>
        </x-ui.item-content>
    </x-ui.item>
</div>

With Switch

Push notifications

Receive push notifications on this device.

Email updates

Get product news and announcements.

Dark mode

Use the dark theme across the app.

{{-- A settings list — each row has a switch in its actions slot. --}}
<x-ui.item-group class="w-full max-w-md rounded-lg border">
    <x-ui.item>
        <x-ui.item-media variant="icon"><x-lucide-bell-ring /></x-ui.item-media>
        <x-ui.item-content>
            <x-ui.item-title>Push notifications</x-ui.item-title>
            <x-ui.item-description>Receive push notifications on this device.</x-ui.item-description>
        </x-ui.item-content>
        <x-ui.item-actions>
            <x-ui.switch :checked="true" aria-label="Push notifications" />
        </x-ui.item-actions>
    </x-ui.item>
    <x-ui.item-separator />
    <x-ui.item>
        <x-ui.item-media variant="icon"><x-lucide-mail /></x-ui.item-media>
        <x-ui.item-content>
            <x-ui.item-title>Email updates</x-ui.item-title>
            <x-ui.item-description>Get product news and announcements.</x-ui.item-description>
        </x-ui.item-content>
        <x-ui.item-actions>
            <x-ui.switch aria-label="Email updates" />
        </x-ui.item-actions>
    </x-ui.item>
    <x-ui.item-separator />
    <x-ui.item>
        <x-ui.item-media variant="icon"><x-lucide-moon /></x-ui.item-media>
        <x-ui.item-content>
            <x-ui.item-title>Dark mode</x-ui.item-title>
            <x-ui.item-description>Use the dark theme across the app.</x-ui.item-description>
        </x-ui.item-content>
        <x-ui.item-actions>
            <x-ui.switch :checked="true" aria-label="Dark mode" />
        </x-ui.item-actions>
    </x-ui.item>
</x-ui.item-group>

API Reference

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

Props

Prop Type Default Description
variant string 'default' Visual style of the row container.
default outline muted
size string 'default' Padding and inner gap density of the row.
default sm
href string — When set, the row renders as an <a> link (with hover affordance) instead of a <div>.

Slots

Slot Description
default Row contents, composed from the item sub-components: <x-ui.item-media> (leading icon/avatar/image, variant default|icon|image), <x-ui.item-content> (wrapping <x-ui.item-title> and <x-ui.item-description>), and <x-ui.item-actions> (trailing controls). Wrap multiple items in <x-ui.item-group> and separate them with <x-ui.item-separator>.