Laravel Main Component
Free · MITThe page's primary content region, rendered as a semantic <main> landmark.
A Main 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::main>
Installation
composer require bluestarsystem/aura-uiUsage
<div class="flex">
<x-aura::aside>…</x-aura::aside>
<x-aura::main>
<h1>Orders</h1>
</x-aura::main>
</div>See the full API, props and live examples in the Main documentation.
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.
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>
See more examples and every variant in the Main documentation.