Layout & display

AuthShell

The frame for a page outside the app shell: sign in, sign up, a password reset, an invitation, the first-run setup. It centers the product lockup, one heading and a card on the page ground.

Example

The shell is a whole page: it renders the main landmark and the one h1, and takes the full height of the window to center its card. The example below runs in a frame of its own for that reason, and it follows the theme you pick on this site.

A tenant's lockup and colors

lockup replaces the product mark above the heading, for a page that carries a tenant's logo and name. class and style reach the page's outer element, so custom properties set there scope to the page. Set a tenant's accent on the three brand tokens and every control on the page takes it: the button and its hover and pressed states, the focus ring and the border of a focused field.

The kit puts dark text on the brand color in the dark theme and light text in the light one, so no single accent keeps 4.5:1 against both. Give each token a light and a dark value with light-dark(). The kit's themes set the page's color scheme, so light-dark() picks the value for the theme in force. Switch the theme inside the frame to see both.

With an href the lockup sits inside the link and names it, so it carries words or an image with alt text. Under a touch screen the link takes a 44px target, and a mouse sees it where it was.

Anatomy

title is the page's one heading, and description the line under it. A sign-in swaps the title for the second-factor step rather than adding a heading.
href makes the lockup a link, usually home. Left out, the lockup is a mark and not a link.
lockup takes the product mark's place, for a tenant's logo and name.
actions sits at the top end of the column: a theme toggle, a language switch.
footer sits under the card and holds the one link that leads off the page, such as creating an account.
width is md for a form and lg for a walkthrough with more than one column.
class and style reach the page's outer element, where a tenant's accent scopes to the page.

Because the shell renders main, the page around it renders none. A page inside the app uses AppShell and PageShell instead.

API

Prop	Type	Default	Description
`title` required	`string`	no default	The page's one heading.
`description`	`string`	no default	A line under the heading.
`href`	`string`	no default	Where the lockup links. Left out, the lockup is not a link.
`width`	`'md' \| 'lg'`	`'md'`	md for a form, lg for a walkthrough with more than one column.
`lockup`	`Snippet`	no default	Drawn above the heading in place of the product mark, such as a tenant's logo and name. Inside the href link it names that link.
`actions`	`Snippet`	no default	Controls at the top end of the column, such as a theme toggle.
`footer`	`Snippet`	no default	Under the card: the one link that leads off the page.
`class`	`string`	no default	Extra classes on the page's outer element.
`style`	`string`	no default	Set on the page's outer element, so custom properties scope to the page, such as a tenant's brand tokens.
`children` required	`Snippet`	no default	The card body, usually a form.