Auth · Page template

Login

Centered auth card with email/password, social options, and password reset.

app.example.com/login
What it is

When to reach for it.

The canonical sign-in screen. Centered card on a neutral page, logo at the top, email + password fields, primary CTA, divider, social-login row, and a 'forgot password' link in the footer. The goal of a login page is to get out of the user's way — this template optimizes for familiarity.

  • Building the unauthenticated entry point for an authenticated app.
  • Adding social login alongside email/password without redesigning the page.
  • Replacing a generic auth form with something that matches the rest of the app's polish.
Structure

What's in the template.

Each section pre-wired with the right CleenUI primitives. Swap, remove, or extend any of them — the template is a starting point, not a constraint.

  1. 1

    Card header

    Logo + 'Welcome back' + 1-line subtitle.

    HeadingText
  2. 2

    Email + password

    Two fields, labels above, password field with show/hide toggle.

    Input
  3. 3

    Primary CTA

    Full-width 'Sign in' button below the fields.

    Button
  4. 4

    Social row

    Divider with 'or' text, then 2–3 social-provider buttons.

    Button
  5. 5

    Footer link

    'Forgot password?' and 'Create an account' link line.

    Text
Components used

Everything this template touches.

All of these are in the catalog — the Builder skill imports them automatically. Each chip links to that component's page.

InputButtonHeadingTextCheckbox
What you customize

Substitutions.

When the Builder skill scaffolds this template for you, these are the fields it asks about — or infers from your prompt.

FieldExampleWhere it appears
appNameCleenUICard header
socialProvidersGoogle, GitHub, MicrosoftSocial-row buttons
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Ask your AI agent to scaffold this template in your project — the Builder skill knows the Login layout and the components it uses.

Get started

Get started with CleenUI.

Two paths to your first component. Pick the one that fits how your team builds.

Path A · Recommended

With AI agent skills

One prompt to your AI tool. The Setup skill handles dependencies, design tokens, build config, and component registration — all without leaving your editor.

Path B · Manual

With npm

The classic flow. Install the package, import the styles, drop in your first component. No agents required — same end result.