Skip to content

No results for

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

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::main> renders a real <main> element. That matters for more than tidiness: assistive technology exposes it as the main landmark, which is how a screen-reader user skips the navigation and jumps straight to the content of the page.

It grows to fill the space it is given and will not be squeezed below its content width, so it sits correctly beside a Sidebar or an Aside.

Basic Usage

Primary page content lives here.
<x-aura::main>
    <div class="rounded-lg border border-aura-surface-200 p-4 text-sm">Primary page content lives here.</div>
</x-aura::main>
<div class="flex">
    <x-aura::aside>…</x-aura::aside>

    <x-aura::main>
        <h1>Orders</h1>
    </x-aura::main>
</div>

Props

This component takes no props. Any attribute you pass — classes included — is merged onto the <main> element.

<x-aura::main class="p-8 space-y-6">…</x-aura::main>

Accessibility

Use exactly one <x-aura::main> per page. A second main landmark makes "skip to content" ambiguous, and automated audits flag it.