Laravel Drawer Component

Free · MIT

A slide-out panel component that appears from any edge of the screen with overlay and smooth transitions.

A Drawer built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::drawer>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<!-- Using the trigger slot -->
<x-aura::drawer title="Drawer Title">
    <x-slot:trigger>
        <x-aura::button>Open Drawer</x-aura::button>
    </x-slot:trigger>
    <p>This is the drawer content.</p>
</x-aura::drawer>

<!-- Using dispatch events (button must be inside an Alpine scope) -->
<x-aura::drawer name="my-drawer" title="Drawer Title">
    <p>This is the drawer content.</p>
</x-aura::drawer>

<div x-data>
    <button x-on:click="$dispatch('open-drawer', 'my-drawer')">
        Open Drawer
    </button>
</div>

See the full API, props and live examples in the Drawer documentation.

Overview

The <x-aura::drawer> component renders a slide-out panel that appears from any edge of the viewport. It supports configurable position, size, an overlay backdrop, optional title and footer slots, and smooth enter/leave transitions. Drawers can be opened via the trigger slot or through Alpine.js $dispatch events using a unique name identifier.

Props

Prop	Type	Default	Description
`name`	`string`	`null`	Unique identifier for the drawer. Used with dispatch events to open/close.
`title`	`string\|null`	`null`	Title text displayed in the drawer header.
`position`	`string`	`'right'`	Edge the drawer slides from: `left`, `right`, `top`, `bottom`.
`size`	`string`	`'md'`	Width (left/right) or height (top/bottom): `sm`, `md`, `lg`, `xl`, `full`.
`overlay`	`bool`	`true`	Show a backdrop overlay behind the drawer.
`closeable`	`bool`	`true`	Whether clicking the overlay or pressing Escape closes the drawer.

Slots

Slot	Description
Default	The main body content of the drawer.
`trigger`	Optional trigger element. Clicking it opens the drawer without dispatch events.
`footer`	Footer section below the body, typically used for action buttons.