Auth layout

06 · Layout

The layout for login, registration, password reset and two-factor authentication pages. It comes in two variants: an illustration on the left with the form on the right (cover), or a single centered card (basic).

acun:layout.auth

→ Open the auth layout as a full page 01 Open the basic variant as a full page

Cover variant

The default variant is cover: on wide screens an illustration fills the left two thirds and the form column sits on the right; below lg only the form remains. When the logo slot is given, it is shown in the top-left corner, linked to home-url.

BLADE

<acun:layout.auth title="Log in">
    <acun:slot:head>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </acun:slot:head>

    <acun:slot:logo><img src="/logo.svg" alt="Acun Panel" class="h-8 w-auto"></acun:slot:logo>

    <acun:auth-header title="Welcome" description="Log in to your account to continue." />
    <acun:auth-session-status class="mt-4" :status="session('status')" />

    <form wire:submit="login" class="mt-6 space-y-4">
        <acun:input wire:model="email" type="email" variant="floating" label="Email" />
        <acun:input wire:model="password" type="password" variant="floating" label="Password" viewable />
        <acun:checkbox wire:model="remember" label="Remember me" />
        <acun:button type="submit" class="w-full">Log In</acun:button>
    </form>
</acun:layout.auth>

Prop	Values
`variant`	cover \| basic
`home-url`	Link of the logo; defaults to url('/')

Centered card

variant="basic" shows the form in a single card centered on a dotted background. In this variant, when no logo is given, the application name is shown above the card. It suits short forms (forgot password, verification code).

BLADE

<acun:layout.auth variant="basic" title="Forgot password">
    <acun:auth-header title="Forgot password" description="Enter your registered email address and we will send you a password reset link." />

    <form wire:submit="sendLink" class="mt-6 space-y-4">
        <acun:input wire:model="email" type="email" label="Email" />
        <acun:button type="submit" class="w-full">Send link</acun:button>
    </form>
</acun:layout.auth>

Prop	Values
`variant`	cover \| basic

Heading and status message

Put a heading and a short description at the top of the form column with acun:auth-header. acun:auth-session-status shows the result of an action (e.g. "link sent") in green text; when status is empty it renders nothing, so session('status') can be passed directly.

LIVE EXAMPLE

<acun:auth-header title="Forgot password" description="Enter your registered email address and we will send you a password reset link." />
<acun:auth-session-status class="mt-4" status="A reset link has been sent to your email address." />

Prop	Values
`auth-header: title, description`	Heading and the description below it (both required)
`auth-session-status: status`	Message to show; not rendered when empty

Illustration and colors

In the cover variant, replace the drawing on the left with the illustration slot; this area is hidden from screen readers, so give the image an empty alt. Since the user is not yet known on the login page, theme and brand-color are usually given fixed values, or left empty to fall back to the preference in the browser.

BLADE

<acun:layout.auth brand-color="green" theme="light">
    <acun:slot:illustration>
        <img src="{{ asset('images/login.svg') }}" alt="" class="w-full max-w-xl">
    </acun:slot:illustration>

    …
</acun:layout.auth>

Prop	Values
`theme`	light \| dark \| system
`brand-color`	default \| green \| red \| yellow \| blue \| gray \| dark \| #rrggbb

API

Props and slots

The values the component accepts.

Prop	Default	Description
`variant`	`cover`	cover (illustration + form) · basic (centered card)
`title`	`null`	Tab title; defaults to the application name
`home-url`	`url('/')`	Link of the logo
`theme`	`null`	light · dark · system; when null, the preference in the browser
`brand-color`	`null`	default · green · red · yellow · blue · gray · dark · #rrggbb
`auth-header: title, description`	—	Form heading and description (required)
`auth-session-status: status`	—	Status message; not rendered when empty

Slots: head, logo, illustration (cover only), default (form content)