Laravel Layout Component

Free · MIT

Structural primitives for page layout — container, layout, main, and aside components.

A Layout 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::layout>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::container>
    <x-aura::layout>
        <x-aura::main>
            {{-- Primary content --}}
        </x-aura::main>
        <x-aura::aside>
            {{-- Sidebar --}}
        </x-aura::aside>
    </x-aura::layout>
</x-aura::container>

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

Overview

Aura UI provides four layout primitives that work together to build common page structures:

Container — Max-width centered wrapper with responsive padding
Layout — Flex wrapper that arranges main content and sidebar
Main — Primary content area that grows to fill available space
Aside — Sidebar area with configurable width and optional sticky positioning

These components output semantic HTML (<div>, <main>, <aside>) and use Tailwind utilities for responsive behavior.