v1.1.8

Auth

Sign in, sign up, and password reset page layouts for authentication flows.

Sign In

Minimal centered sign-in form with email and password.

html

Welcome back

Sign in to your account

Forgot password?

No account? Sign up

<div class="uc-min-h-screen uc-bg-neutrals-background uc-flex uc-items-center uc-justify-center uc-p-4">
  <div class="uc-w-full uc-max-w-sm">
    <div class="uc-text-center uc-mb-8">
      <div class="uc-w-10 uc-h-10 uc-rounded-xl uc-bg-accents-blue uc-mx-auto uc-mb-4"></div>
      <h1 class="uc-text-2xl uc-font-bold">Welcome back</h1>
      <p class="uc-text-sm uc-text-fg-disabled uc-mt-1">Sign in to your account</p>
    </div>
    <div class="uc-surface-card uc-p-6 uc-space-y-4">
      <div>
        <label class="uc-label uc-mb-1.5 uc-block">Email</label>
        <input type="email" placeholder="you@example.com" class="uc-input" />
      </div>
      <div>
        <div class="uc-flex uc-items-center uc-justify-between uc-mb-1.5">
          <label class="uc-label">Password</label>
          <a href="#" class="uc-text-xs uc-text-accents-blue">Forgot password?</a>
        </div>
        <input type="password" placeholder="••••••••" class="uc-input" />
      </div>
      <button class="uc-btn uc-btn-primary uc-w-full">Sign in</button>
    </div>
    <p class="uc-text-center uc-text-sm uc-text-fg-disabled uc-mt-4">No account? <a href="#" class="uc-text-accents-blue uc-font-medium">Sign up</a></p>
  </div>
</div>

Sign Up

Registration form with name, email, password, and terms.

html

Create an account

Start your free trial today

By creating an account you agree to our Terms and Privacy Policy.

Already have an account? Sign in

<div class="uc-min-h-screen uc-bg-neutrals-background uc-flex uc-items-center uc-justify-center uc-p-4">
  <div class="uc-w-full uc-max-w-sm">
    <div class="uc-text-center uc-mb-8">
      <div class="uc-w-10 uc-h-10 uc-rounded-xl uc-bg-accents-blue uc-mx-auto uc-mb-4"></div>
      <h1 class="uc-text-2xl uc-font-bold">Create an account</h1>
      <p class="uc-text-sm uc-text-fg-disabled uc-mt-1">Start your free trial today</p>
    </div>
    <div class="uc-surface-card uc-p-6 uc-space-y-4">
      <div class="uc-grid uc-grid-cols-2 uc-gap-3">
        <div>
          <label class="uc-label uc-mb-1.5 uc-block">First name</label>
          <input type="text" placeholder="John" class="uc-input" />
        </div>
        <div>
          <label class="uc-label uc-mb-1.5 uc-block">Last name</label>
          <input type="text" placeholder="Doe" class="uc-input" />
        </div>
      </div>
      <div>
        <label class="uc-label uc-mb-1.5 uc-block">Email</label>
        <input type="email" placeholder="you@example.com" class="uc-input" />
      </div>
      <div>
        <label class="uc-label uc-mb-1.5 uc-block">Password</label>
        <input type="password" placeholder="Min. 8 characters" class="uc-input" />
      </div>
      <button class="uc-btn uc-btn-primary uc-w-full">Create account</button>
      <p class="uc-text-xs uc-text-fg-disabled uc-text-center">By creating an account you agree to our <a href="#" class="uc-text-accents-blue">Terms</a> and <a href="#" class="uc-text-accents-blue">Privacy Policy</a>.</p>
    </div>
    <p class="uc-text-center uc-text-sm uc-text-fg-disabled uc-mt-4">Already have an account? <a href="#" class="uc-text-accents-blue uc-font-medium">Sign in</a></p>
  </div>
</div>

Forgot Password

Password reset flow — user enters email to receive a reset link.

html

Forgot password?

Enter your email and we'll send a reset link

Back to sign in

<div class="uc-min-h-screen uc-bg-neutrals-background uc-flex uc-items-center uc-justify-center uc-p-4">
  <div class="uc-w-full uc-max-w-sm">
    <div class="uc-text-center uc-mb-8">
      <div class="uc-w-10 uc-h-10 uc-rounded-xl uc-bg-accents-blue uc-mx-auto uc-mb-4"></div>
      <h1 class="uc-text-2xl uc-font-bold">Forgot password?</h1>
      <p class="uc-text-sm uc-text-fg-disabled uc-mt-1">Enter your email and we will send a reset link</p>
    </div>
    <div class="uc-surface-card uc-p-6 uc-space-y-4">
      <div>
        <label class="uc-label uc-mb-1.5 uc-block">Email</label>
        <input type="email" placeholder="you@example.com" class="uc-input" />
      </div>
      <button class="uc-btn uc-btn-primary uc-w-full">Send reset link</button>
    </div>
    <p class="uc-text-center uc-text-sm uc-text-fg-disabled uc-mt-4"><a href="#" class="uc-text-accents-blue uc-font-medium">Back to sign in</a></p>
  </div>
</div>

Split Layout

Two-column layout with a testimonial or brand panel on the left.

html

"The best UI kit I've ever worked with."

— Jane Smith, Product Designer

Sign in

Welcome back

No account? Sign up

<div class="uc-min-h-screen uc-bg-neutrals-background uc-flex">
  <div class="uc-hidden uc-lg:flex uc-flex-1 uc-bg-neutrals-muted uc-items-end uc-p-12">
    <div>
      <p class="uc-text-lg uc-font-semibold uc-leading-snug uc-max-w-xs">"The best UI kit I have ever worked with."</p>
      <p class="uc-text-sm uc-text-fg-secondary uc-mt-2">— Jane Smith, Product Designer</p>
    </div>
  </div>
  <div class="uc-flex uc-flex-1 uc-items-center uc-justify-center uc-p-8">
    <div class="uc-w-full uc-max-w-sm uc-space-y-6">
      <div>
        <h1 class="uc-text-2xl uc-font-bold">Sign in</h1>
        <p class="uc-text-sm uc-text-fg-disabled uc-mt-1">Welcome back</p>
      </div>
      <div class="uc-space-y-4">
        <div>
          <label class="uc-label uc-mb-1.5 uc-block">Email</label>
          <input type="email" placeholder="you@example.com" class="uc-input" />
        </div>
        <div>
          <label class="uc-label uc-mb-1.5 uc-block">Password</label>
          <input type="password" placeholder="••••••••" class="uc-input" />
        </div>
        <button class="uc-btn uc-btn-primary uc-w-full">Sign in</button>
      </div>
      <p class="uc-text-sm uc-text-fg-disabled">No account? <a href="#" class="uc-text-accents-blue uc-font-medium">Sign up</a></p>
    </div>
  </div>
</div>

API Reference

Utility classes used across auth page layouts.

Class Type Description
uc-surface-card Container Card wrapper with border, radius, and background
uc-input Form Text input field with consistent styling
uc-btn uc-btn-primary uc-w-full Button Full-width primary submit button
uc-min-h-screen Layout Full viewport height container
uc-bg-neutrals-background Color Page background color
uc-text-accents-blue Color Link and accent color
uc-max-w-sm Container Constrains form width to ~384px

Accessibility

Requirements for accessible authentication forms.

Feature Details
Labels Every input must have an associated <label> with matching for/id attributes
Autocomplete Use autocomplete="email", "current-password", "new-password" on relevant inputs
Error messages Use aria-describedby to link error messages to inputs
Submit button Use <button type="submit"> inside a <form> element
Focus Auto-focus the first input on page load for keyboard users
Password visibility Toggle button should have aria-label="Show password" / "Hide password"