AuthLayout

AuthLayout centers a sign-in card on the workspace canvas. The logo, corner tools, and optional side panel are slots, so the frame carries no product branding.

import { AuthLayout } from '@lobehub/ui/dashboard';

NPM Source Edit

Layout

Default

Loading preview

The layout fills its parent. Give that parent a height, or stretch the document root to the viewport.

APIs

AuthLayout properties

aside: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
Optional panel beside the form. Hidden below the laptop breakpoint.
brand: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
Home mark rendered in the corner. Pass your own logo.
children: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
description: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
titleRequired: ReactNode
tools: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
Corner actions, such as a theme switch.

Also accepts all native HTML and ARIA attributes.