Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add container

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::container> centres its content and caps its width, so text does not stretch into unreadable lines on a wide monitor. It is the outermost wrapper for most pages — put your sections inside it, not around it.

Basic Usage

Content constrained to the container width.
<x-aura::container>
    <div class="rounded-lg border border-aura-surface-200 p-4 text-sm">Content constrained to the container width.</div>
</x-aura::container>
<x-aura::container>
    <h1>Dashboard</h1>
</x-aura::container>

Props

Prop Type Default Description
size string 'lg' Maximum width: sm, md, lg, xl, full.

Sizes

Each size maps to a Tailwind screen breakpoint, so the container never exceeds the width that breakpoint describes.

sm
md
lg (default)
<div class="space-y-3">
    <x-aura::container size="sm"><div class="rounded bg-aura-primary-100 p-2 text-center text-xs">sm</div></x-aura::container>
    <x-aura::container size="md"><div class="rounded bg-aura-primary-100 p-2 text-center text-xs">md</div></x-aura::container>
    <x-aura::container size="lg"><div class="rounded bg-aura-primary-100 p-2 text-center text-xs">lg (default)</div></x-aura::container>
</div>
<x-aura::container size="sm">…</x-aura::container>
<x-aura::container size="xl">…</x-aura::container>
<x-aura::container size="full">…</x-aura::container>

Notes

size="full" removes the cap entirely while keeping the horizontal padding — useful for a dashboard that should use the whole screen but still not touch the edges.

Pair it with Main and Aside to build a page shell.