Auth Shell

A centered single-column layout organism for authentication pages (sign in, sign up, password reset, email verification). Vertically and horizontally centers a narrow Card with slots for a brand/logo, title, description, body, and footer.

Sign In

Welcome back to Lavahire.

Need an account? Sign up

import { AuthShell } from "@/components/auth-shell"
import { Button } from "@/components/ui/button"
import { Field, FieldLabel } from "@/components/ui/field"
import { Form } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { PasswordInput } from "@/components/ui/password-input"

<AuthShell
  title="Sign in"
  description="Welcome back to Lavahire."
  footer={
    <span>
      Need an account? <a className="underline" href="/sign-up">Sign up</a>
    </span>
  }
>
  <Form>
    <Field id="email">
      <FieldLabel>Email</FieldLabel>
      <Input id="email" type="email" placeholder="you@example.com" />
    </Field>
    <Field id="password">
      <FieldLabel>Password</FieldLabel>
      <PasswordInput id="password" autoComplete="current-password" />
    </Field>
    <Button type="submit" className="w-full">Sign in</Button>
  </Form>
</AuthShell>

API Reference

Prop	Type	Default	Description
`title`	`React.ReactNode`	—	Heading shown at the top of the card.
`description`	`React.ReactNode`	—	Optional supporting text rendered below the title.
`brand`	`React.ReactNode`	—	Optional brand/logo node rendered above the title.
`footer`	`React.ReactNode`	—	Optional footer content rendered below the body (e.g. a "Need an account? Sign up" link).
`className`	`string`	—	Additional CSS classes applied to the outer centering container.