Laravel Aside Component

Free · MIT

Complementary side region for filters, secondary navigation or contextual panels.

A Aside built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::aside>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<div class="flex gap-6">
    <x-aura::main>…</x-aura::main>
    <x-aura::aside>
        <h2>Filters</h2>
    </x-aura::aside>
</div>

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

Overview

<x-aura::aside> renders a semantic <aside> — the complementary landmark — for content that supports the main content without being part of it: filters, a table of contents, a summary panel.

It is full width on small screens and takes a fixed width from the lg breakpoint up, so a narrow viewport stacks it above or below the content instead of squeezing both.

Props

Prop	Type	Default	Description
`width`	`string`	`'md'`	Width from `lg` up: `sm` (14rem), `md` (16rem), `lg` (20rem).
`sticky`	`bool`	`false`	Keep the panel in view while the main content scrolls.