# Auth shell

> The frame of a log in, sign up or recovery page; brand mark, heading and your form, centred, in a card, beside a panel, or beside a step sidebar.

URL: https://apogee.avaui.dev/docs/sections/auth-shell
Last updated: 2026-10-15

The frame of a log in, sign up or recovery page; brand mark, heading and your form, centred, in a card, beside a panel, or beside a step sidebar.

Last updated October 15, 2026

```astro
<AuthShell heading="Log in to your account" description="Welcome back! Please enter your details." pattern="grid">
<FeaturedIcon slot="brand" theme="solid" color="primary" size="large"><Orbit /></FeaturedIcon>
<form method="post">…</form>
<p slot="footer">Don't have an account? <Link href="/sign-up">Sign up</Link></p>
</AuthShell>
```

Whole pages built on it: [Log in pages](https://apogee.avaui.dev/docs/log-in-pages) and [Sign up pages](https://apogee.avaui.dev/docs/sign-up-pages).

## Add

```sh
npx @ava-ui/apogee add auth-shell
```

## Layouts

-   `centered`: the header and form centred on the page. `pattern` draws a faint grid or rings behind the brand mark.
-   `card`: the header and form inside one raised card on a grey page. For the heading on the page and only the form in a card, use `centered` with `background="neutral-faded"` and put your form in a Card.
-   `split`: the form in one column and the `panel` slot in the other. The panel hides below `lg`. `panelSide` picks the side, `panelBackground` the fill, and the `legal` slot sits at the foot of the form column.
-   `sidebar`: a narrow `panel` column (26rem) at the start, usually the steps of a multi-step flow, beside a centred form. See [Sidebar progress](https://apogee.avaui.dev/docs/sign-up-pages/sidebar-progress).

## Slots

| Slot | What goes in it |
| --- | --- |
| default | Your form. |
| `brand` | The logo, above the heading. |
| `intro` | Under the heading, before the form: a sign up / log in switch (`centered` only). |
| `footer` | Under the form: “Don’t have an account? Sign up”. |
| `below` | Under the form and wider than it (up to 48rem): a step list or a progress indicator. |
| `header` | A top bar above the page. |
| `legal` | Copyright at the foot of the form column (`split` only). |
| `panel` | The other half in `split` (a photo, a quote, a carousel), or the side column in `sidebar`. |

## API

| Prop | Type | Default | Category | Description |
| --- | --- | --- | --- | --- |
| `heading` | `string` | — | content | The page heading. |
| `description` | `string` | — | content |  |
| `layout` | `'centered' \| 'card' \| 'split' \| 'sidebar'` | `'centered'` | layout |  |
| `align` | `'start' \| 'center'` | `'center'`; `'start'` in `split` | layout | Header alignment. |
| `background` | `'page' \| 'neutral-faded' \| 'primary-faded' \| 'primary' \| 'inverted'` | `'page'`; `'neutral-faded'` in `card` | layout | Page fill. |
| `pattern` | `'none' \| 'grid' \| 'circles'` | `'none'` | layout | Behind the brand mark. |
| `panelSide` | `'start' \| 'end'` | `'end'`; `'start'` in `sidebar` | layout |  |
| `panelBackground` | as `background` | `'neutral-faded'` | layout |  |
| `fullHeight` | `boolean` | `true` | layout | Fill the viewport height. |
| `headingLevel`, `id` |  | `headingLevel` is `1` | layout | As on every section. |

## Accessibility

-   The section is labelled by its heading, which is the page’s `h1` by default.
-   The pattern is decoration (`aria-hidden`), and the panel sits after the form in the source, so keyboard and screen reader users reach the form first even with `panelSide="start"`.

## Related

[

Log in pagesWhole log in pages built on the AuthShell section, from a centred form to split layouts with a panel.

](https://apogee.avaui.dev/docs/log-in-pages)[

Sign up pagesWhole sign up pages built on the AuthShell section, from a centred form to multi-step flows with a progress sidebar.

](https://apogee.avaui.dev/docs/sign-up-pages)[

CardA surface container for grouped content. Compose freely inside — heading, text, button, an optional media block.

](https://apogee.avaui.dev/docs/card)[

StepsA vertical progress list for onboarding, checkout, and wizard flows.

](https://apogee.avaui.dev/docs/steps)