Skip to content

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.

Basic Usage

Main Content

This is the primary content area.

<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>

Props

Container

Prop Type Default Description
size string 'lg' Max-width: sm, md, lg, xl, full

Layout

Prop Type Default Description
aside string 'right' Sidebar position: left, right

Main

No custom props. Supports all HTML attributes via {{ $attributes }}.

Aside

Prop Type Default Description
width string 'md' Sidebar width: sm (14rem), md (16rem), lg (20rem)
sticky bool false Make sidebar sticky on scroll (desktop only)

Variants / Examples

Main area with left sidebar layout.

<x-aura::layout aside="left">
    <x-aura::main>...</x-aura::main>
    <x-aura::aside width="sm">...</x-aura::aside>
</x-aura::layout>

Scrollable Content

This main area scrolls normally while the sidebar stays fixed in place.

Block 1

Block 2

Block 3

<x-aura::layout>
    <x-aura::main>
        {{-- Long scrollable content --}}
    </x-aura::main>
    <x-aura::aside :sticky="true">
        {{-- This sidebar stays visible while scrolling --}}
    </x-aura::aside>
</x-aura::layout>

Container Sizes

Each container constrains its content to a different maximum width. All containers are centered with auto margins:

sm — max-width: 640px
Container sm
md — max-width: 768px
Container md
lg — max-width: 1024px (default)
Container lg
xl — max-width: 1280px
Container xl
full — max-width: 100%
Container full
<x-aura::container size="sm">Narrow content</x-aura::container>
<x-aura::container size="md">Medium content</x-aura::container>
<x-aura::container size="lg">Default width</x-aura::container>
<x-aura::container size="xl">Wide content</x-aura::container>
<x-aura::container size="full">Full width</x-aura::container>

Accessibility

  • <x-aura::main> renders a <main> element, providing a landmark for screen readers.
  • <x-aura::aside> renders an <aside> element, identifying supplementary content.
  • On mobile, the layout stacks vertically with main content first, regardless of sidebar position.