Ouro HX

Navigation

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 <h1>, the form, and a line under the card. It is the page's <main>, at least as tall as the screen, and fills a phone's width.

Sign in

Welcome back to your kitchen.

New here? Create an account

In Spoonjoy

Spoonjoy, a recipe app, is built with Ouro HX (how).

See it live, no sign-in needed: Sign in · Sign up

In its source: app/components/auth/auth-page.tsx

Install

Once per app, with Tailwind CSS v4 and an @/* path alias (Ouro HX is built on Base UI, so --base base; skip -t in an existing app):

npx shadcn@latest init --base base --preset nova --yes --no-monorepo
npx shadcn@latest add ourostack/ouro-ui/ouro-base#v1.2.13

Then the component. From v0.8.0 it installs only the helpers it imports and never touches your stylesheet (Installing):

npx shadcn@latest add ourostack/ouro-ui/auth-layout#v1.2.13

Or, with the @ouro namespace set up:

npx shadcn@latest add @ouro/ouro-base @ouro/auth-layout

Its tests, stories and Playwright spec are optional. They need Vitest 4.1.11 or later, and from v0.8.0 never change a version your app has (Testing):

npx shadcn@latest add ourostack/ouro-ui/auth-layout#v1.2.13 ourostack/ouro-ui/auth-layout-tests#v1.2.13
import { AuthLayout } from "@/components/ouro/auth-layout/auth-layout";

Paths use shadcn's default @/ alias; the CLI rewrites them to yours.

Example

<AuthLayout title="Sign in" description="Welcome back." footer={<Link href="/signup">Create an account</Link>}>
  <Form>
    <TextField label="Email" name="email" type="email" required />
    <Button type="submit" fullWidth>Sign in</Button>
  </Form>
</AuthLayout>

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.

as
Type: "div" | "main"
Default: "main"
The element the layout renders. Pass "div" when the layout renders inside a page that already has a <main>, since a document has one.
brand
Type: ReactNode
Your logo or product name, above the title. Link it to the home page.
children (required)
Type: ReactNode
The form: fields and the submit button, usually a Form.
className
Type: string
Layout only: margins and height (min-h-96). Appearance classes warn in development.
description
Type: ReactNode
A line under the title: "Welcome back to Spoonjoy."
footer
Type: ReactNode
A line under the card, such as the link to the other form: "No account? Sign up".
ref
Type: Ref<HTMLElement>
Reaches the rendered element.
title (required)
Type: string
The page's heading, its <h1>: "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: <AuthLayout title="Sign in">.
  • logo: Not a prop. Ouro UI uses brand: <AuthLayout brand={<Logo />}>.
  • subtitle: Not a prop. Ouro UI uses description: <AuthLayout description="Welcome back">.

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.

Source on GitHubThis page as Markdown