# AuthLayout The page for signing in, signing up or resetting a password: one `Card` in the middle of the screen, with your brand, the title as the page's `

`, the form, and a line under the card. It is the page's `
`, at least as tall as the screen, and fills a phone's width. ```tsx import { AuthLayout } from "@/components/ouro/auth-layout/auth-layout"; ``` ## Example ```tsx Create an account}>
``` ## Usage Use `Dialog` for a sign-in prompt over another page. ## Use instead when - Use `SidebarLayout` or `StackedLayout` instead for the signed-in app. ## Props Type: `AuthLayoutProps`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `as` | `"div" \| "main"` | `"main"` | The element the layout renders. Pass `"div"` when the layout renders inside a page that already has a `
`, since a document has one. | | `brand` | `ReactNode` | | Your logo or product name, above the title. Link it to the home page. | | `children` (required) | `ReactNode` | | The form: fields and the submit button, usually a `Form`. | | `className` | `string` | | Layout only: margins and height (`min-h-96`). Appearance classes warn in development. | | `description` | `ReactNode` | | A line under the title: "Welcome back to Spoonjoy." | | `footer` | `ReactNode` | | A line under the card, such as the link to the other form: "No account? Sign up". | | `ref` | `Ref` | | Reaches the rendered element. | | `title` (required) | `string` | | The page's heading, its `

`: "Sign in". | ## Native attributes Also accepts the attributes in React's `HTMLAttributes` (`id`, `aria-*`, event handlers), passed to the rendered element, except those named on this page. ## Don't use These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix. - `heading`: Not a prop. Ouro UI uses `title`: ``. - `logo`: Not a prop. Ouro UI uses `brand`: `}>`. - `subtitle`: Not a prop. Ouro UI uses `description`: ``. ## `className` is for layout only Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn. Alignment classes (`text-center`) warn too: set alignment on a parent element.