AuthScreen
The page around a sign-in form. On wide screens it adds a brand panel.
SourcePackage @kerf-js/veneer
Preview
tsx
import { AuthScreen, SignIn } from '@kerf-js/veneer'export function Split() { return ( <AuthScreen name="kerf" quote={testimonial} cite="Mara Lindqvist · kerf" > <SignIn heading="h3" title="Welcome back" lede="Sign in to your workspace." providers={PROVIDERS} onSubmit={() => void wait(900)} onForgot={() => {}} onSignUp={() => {}} /> </AuthScreen> )}const testimonial = 'We moved forty services in a quarter' + ' and never missed a deploy.'const wait = (ms: number) => new Promise((done) => { setTimeout(done, ms) })const PROVIDERS = [ { id: 'google', label: 'Google', glyph: 'M12 3a9 9 0 1 0 8.5 12H12', }, { id: 'github', label: 'GitHub', glyph: 'M9 8l-5 4 5 4M15 8l5 4-5 4', },]Installation
npm install @kerf-js/veneerUsage
tsx
import { AuthScreen } from '@kerf-js/veneer'Accessibility
- The brand panel is decorative, so it is hidden from assistive tech.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
logo | unknown | — | Your logo. |
name | unknown | — | Your product's name. |
quote | unknown | — | A line on the brand panel. |
cite | unknown | — | Who said it. |
brand | unknown | — | Your own brand panel. |
children | unknown | — | What it contains. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="auth"] [data-part="layout"]
layoutbrandmainpanel