blatui

Components

Drawer

A drawer component that slides in from the edge of the screen.

php artisan blatui:add drawer 
<x-ui.drawer>
    <x-ui.drawer-trigger>
        <x-ui.button variant="outline">Open Drawer</x-ui.button>
    </x-ui.drawer-trigger>
    <x-ui.drawer-content>
        <div class="mx-auto w-full max-w-sm">
            <x-ui.drawer-header>
                <x-ui.drawer-title>Move Goal</x-ui.drawer-title>
                <x-ui.drawer-description>Set your daily activity goal.</x-ui.drawer-description>
            </x-ui.drawer-header>
            <div class="p-4 pb-0">
                <div class="flex items-center justify-center space-x-2">
                    <x-ui.button variant="outline" size="icon" class="size-8 shrink-0 rounded-full">
                        <x-lucide-minus />
                        <span class="sr-only">Decrease</span>
                    </x-ui.button>
                    <div class="flex-1 text-center">
                        <div class="text-5xl font-bold tracking-tighter">350</div>
                        <div class="text-muted-foreground text-xs uppercase">Calories/day</div>
                    </div>
                    <x-ui.button variant="outline" size="icon" class="size-8 shrink-0 rounded-full">
                        <x-lucide-plus />
                        <span class="sr-only">Increase</span>
                    </x-ui.button>
                </div>
            </div>
            <x-ui.drawer-footer>
                <x-ui.button>Submit</x-ui.button>
                <x-ui.drawer-close>
                    <x-ui.button variant="outline" class="w-full">Cancel</x-ui.button>
                </x-ui.drawer-close>
            </x-ui.drawer-footer>
        </div>
    </x-ui.drawer-content>
</x-ui.drawer>

Directions

<div class="flex flex-wrap items-center gap-2">
    @foreach (['top', 'right', 'bottom', 'left'] as $dir)
        <x-ui.drawer direction="{{ $dir }}">
            <x-ui.drawer-trigger>
                <x-ui.button variant="outline">{{ ucfirst($dir) }}</x-ui.button>
            </x-ui.drawer-trigger>
            <x-ui.drawer-content>
                <div class="mx-auto w-full max-w-sm">
                    <x-ui.drawer-header>
                        <x-ui.drawer-title>{{ ucfirst($dir) }} drawer</x-ui.drawer-title>
                        <x-ui.drawer-description>This drawer slides in from the {{ $dir }} edge of the screen.</x-ui.drawer-description>
                    </x-ui.drawer-header>
                    <x-ui.drawer-footer>
                        <x-ui.drawer-close>
                            <x-ui.button variant="outline" class="w-full">Close</x-ui.button>
                        </x-ui.drawer-close>
                    </x-ui.drawer-footer>
                </div>
            </x-ui.drawer-content>
        </x-ui.drawer>
    @endforeach
</div>

Form

<x-ui.drawer>
    <x-ui.drawer-trigger>
        <x-ui.button variant="outline">Contact us</x-ui.button>
    </x-ui.drawer-trigger>
    <x-ui.drawer-content>
        <div class="mx-auto w-full max-w-sm">
            <x-ui.drawer-header>
                <x-ui.drawer-title>Get in touch</x-ui.drawer-title>
                <x-ui.drawer-description>We'll get back to you within one business day.</x-ui.drawer-description>
            </x-ui.drawer-header>
            <form class="flex flex-col gap-4 p-4">
                <x-ui.field>
                    <x-ui.field-label for="drawer-email">Email</x-ui.field-label>
                    <x-ui.input id="drawer-email" type="email" placeholder="[email protected]" />
                </x-ui.field>
                <x-ui.field>
                    <x-ui.field-label for="drawer-msg">Message</x-ui.field-label>
                    <x-ui.textarea id="drawer-msg" placeholder="How can we help?" />
                </x-ui.field>
            </form>
            <x-ui.drawer-footer>
                <x-ui.button>Send message</x-ui.button>
                <x-ui.drawer-close>
                    <x-ui.button variant="outline" class="w-full">Cancel</x-ui.button>
                </x-ui.drawer-close>
            </x-ui.drawer-footer>
        </div>
    </x-ui.drawer-content>
</x-ui.drawer>

Scrollable

{{-- Long content scrolls inside the drawer while the header and footer stay fixed. --}}
<x-ui.drawer>
    <x-ui.drawer-trigger>
        <x-ui.button variant="outline">Open scrollable drawer</x-ui.button>
    </x-ui.drawer-trigger>
    <x-ui.drawer-content>
        <div class="mx-auto flex w-full max-w-sm flex-col overflow-hidden">
            <x-ui.drawer-header>
                <x-ui.drawer-title>Terms of Service</x-ui.drawer-title>
                <x-ui.drawer-description>Please read these terms before continuing.</x-ui.drawer-description>
            </x-ui.drawer-header>
            <div class="text-muted-foreground space-y-4 overflow-y-auto px-4 text-sm">
                @foreach (range(1, 10) as $i)
                    <p><span class="text-foreground font-medium">{{ $i }}.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
                @endforeach
            </div>
            <x-ui.drawer-footer>
                <x-ui.button>Accept</x-ui.button>
                <x-ui.drawer-close>
                    <x-ui.button variant="outline" class="w-full">Decline</x-ui.button>
                </x-ui.drawer-close>
            </x-ui.drawer-footer>
        </div>
    </x-ui.drawer-content>
</x-ui.drawer>

API Reference

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

Props

Prop Type Default Description
direction string 'bottom' Which edge of the viewport the drawer slides in from. A drag-handle bar is shown only for the "bottom" direction.
bottom top right left

Slots

Slot Description
default Holds the <x-ui.drawer-trigger> and <x-ui.drawer-content>. The root only manages open state and the slide direction.
trigger The clickable element that opens the drawer, wrapped in <x-ui.drawer-trigger>.
content The sliding panel (<x-ui.drawer-content>), teleported to <body>. Compose it from <x-ui.drawer-header> (with <x-ui.drawer-title> + <x-ui.drawer-description>), your body, and <x-ui.drawer-footer>. Dismisses on overlay click or Escape.
close Wrap any element in <x-ui.drawer-close> to make it dismiss the drawer.