AuthShell

A welcome/auth layout, measured live: a centered page frame with an optional top progress bar, a logo, a two-pane card — the form on the left, an optional product preview on the right — and a footer for legal/support links. The card's auth controls (Input, FormField, Button) get a flatter, auth-specific treatment automatically: a plain hairline ring instead of the in-app soft glow, and a 36px submit instead of 40px.

The preview pane hides under a 1200px viewport (that threshold is chosen, not measured; everything else in the layout is). Omit preview for a single-pane card.

Try it: the demo shows a progress bar at 50%, a wordmark, a sign-in form, and a tinted placeholder standing in for a product screenshot (not reproduced here).

Installation

npm install @crisp-ui-kit/crisp

Usage

import { AuthShell } from "@crisp-ui-kit/crisp";
import { Button, FormField, Input } from "@crisp-ui-kit/crisp";

<AuthShell
  progress={0.5}
  logo={<Logo />}
  title="Sign in to your workspace"
  footer={
    <>
      By continuing you agree to our <a href="/terms">Terms</a>.
    </>
  }
>
  <FormField label="Work email" htmlFor="email">
    <Input id="email" type="email" />
  </FormField>
  <Button intent="primary">Continue</Button>
</AuthShell>;

Props