AuthLayout

Starter

Authentication page layout with background.

layoutauthpage

Import

import { AuthLayout } from "@/components/ui";

Basic Usage

AuthLayout Preview

Sign In

Welcome back

Code

tsx

<AuthLayout
  title="Welcome back"
  description="Enter your credentials to access your account"
>
  <form className="space-y-4">
    <FieldWrapper label="Email" required>
      <Input type="email" placeholder="you@example.com" />
    </FieldWrapper>
    <FieldWrapper label="Password" required>
      <Input type="password" />
    </FieldWrapper>
    <Button className="w-full">Sign In</Button>
  </form>
</AuthLayout>

Sign Up Page

Registration form layout

1<AuthLayout
2  title="Create an account"
3  description="Start your 14-day free trial"
4  showLogo
5>
6  <form className="space-y-4">
7    <FieldWrapper label="Full Name" required>
8      <Input placeholder="John Doe" />
9    </FieldWrapper>
10    <FieldWrapper label="Email" required>
11      <Input type="email" placeholder="you@example.com" />
12    </FieldWrapper>
13    <FieldWrapper label="Password" required>
14      <Input type="password" />
15    </FieldWrapper>
16    <Button className="w-full">Create Account</Button>
17    <p className="text-center text-sm text-muted-foreground">
18      Already have an account? <AppLink href="/login">Sign in</AppLink>
19    </p>
20  </form>
21</AuthLayout>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring