layout / beta

AuthLayout

Responsive sign-in and setup frame with readable form widths and consistent spacing between panels.

LIVE PREVIEW

Loading preview…

When to use

Sign-in, account recovery and workspace setup outside the application shell.
Flows with a conditional workspace chooser, error and form panel.

Consider an alternative

Authenticated pages inside a sidebar shell — use Page.
Dialogs or cards — they already have a containing surface.

Import

import { AuthLayout } from '@revido-llc/kit';

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


title (required)	ReactNode	—	Page heading. The layout renders the page's single h1.
aside	ReactNode	—	Optional supporting content, visible beside the form on wide screens.
description	ReactNode	—	Explain the current step, rather than repeating general product copy.
eyebrow	ReactNode	—	Short context above the heading, such as “Get started”.
footer	ReactNode	—	Optional reassurance or legal links below the content.
header	ReactNode	—	Product identity and utilities, such as a theme switch.
children	ReactNode	—
className	string	—

Examples

Sign in

<AuthLayout title="Welcome back" eyebrow="Sign in" description="Continue to your workspace." header={<Brand />} footer={<PrivacyLinks />}>
  <SignInCard />
</AuthLayout>

Multiple setup panels

The content column owns the gap even when chooser and error panels appear conditionally. Product authentication and workspace data stay in the app.

<AuthLayout title="Choose your workspace" description="Open an existing workspace or create a new one.">
  <WorkspaceChooser />
  {error ? <Callout tone="danger">{error}</Callout> : null}
  <CreateWorkspaceCard />
</AuthLayout>