The sign-in card: a solid card on a deep field, with a logo slot, icon tile, title, footer strip and back link.
AuthLayout paints the auth field (--auth-background, --auth-floor, --auth-sky), centres its child, and takes an optional header (your brand mark, a help link) and footer (a security note). AuthCard frames sign-in, sign-up, MFA, reset and onboarding steps: a logo slot, an optional icon tile, the title (the page's h1) with an optional inline badge, the form, an optional back link and a footer strip.
Installation
npx shadcn@latest add KezLahd/rime/auth-cardAlso installs: base, icon.
Usage
import { AuthCard, AuthLayout } from "@/components/shell/AuthCard";
<AuthLayout>
<AuthCard logo={<Logo />} title="Sign in" subtitle="Use the email you signed up with.">
…form…
</AuthCard>
</AuthLayout>Examples
Sign in with multi-factor authentication
Sign in
Use your work email. You will confirm it is you with your authenticator next.
MFA code step
Enter your code
Open your authenticator app and enter the 6-digit code for Acme.
Lost your device?
Authenticator setup step
Set up your authenticator
Scan the code with an authenticator app, then enter the 6-digit code it shows.
1. Install an authenticator app on your phone.
2. Scan the QR code, or enter this key:
JBSW Y3DP EHPK 3PXP3. Enter the code from the app.
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
AuthCard
| Prop | Type | Default | Description |
|---|---|---|---|
| titleRequired | ReactNode | ||
| subtitle | ReactNode | ||
| logo | ReactNode | Your logo or wordmark, centred above the title. | |
| icon | ReactNode | Icon tile above the title (MFA screens). | |
| badge | ReactNode | A small tag beside nothing else: "Admin", "Staging". Sits above the title on one line with it. | |
| childrenRequired | ReactNode | ||
| footer | ReactNode | A strip under the card body: a trust line, a terms link. | |
| width | "sm" | "md" | "lg" | "sm" | sm 440 (sign-in, MFA), md 520 (set password), lg 720 (onboarding). |
| back | { href: string; label: string } | A way out, under the form: "Back to sign in". |
AuthLayout
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenRequired | ReactNode | ||
| header | ReactNode | A bar across the top of the page: your brand mark at the left, a help link at the right. | |
| footer | ReactNode | A strip at the foot of the page: a security note, legal links. | |
| contained | boolean | Fill a fixed-height parent instead of the viewport (docs previews). |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --auth-ink | var(--ink-inverse) | … |
| --auth-ink-muted | rgba(255, 255, 255, 0.78) | … |
| --heading-case | none | … |
| --heading-tracking | var(--tracking-display) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --auth-background | tokens.css | … |
| --auth-floor | tokens.css | … |
| --auth-sky | tokens.css | … |
| --brand-deep | tokens.css | … |
| --brand-fill | tokens.css | … |
| --brand-gradient-soft | tokens.css | … |
| --brand-ink | tokens.css | … |
| --brand-line | tokens.css | … |
| --font-body | tokens.css | … |
| --font-display | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-inverse | tokens.css | … |
| --ink-muted | tokens.css | … |
| --line-brand | tokens.css | … |
| --line-soft | tokens.css | … |
| --r-full | tokens.css | … |
| --r-lg | tokens.css | … |
| --r-xl | tokens.css | … |
| --shadow-auth-card | tokens.css | … |
| --surface-solid | tokens.css | … |
| --surface-sunken | tokens.css | … |
| --text-auth-title | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-micro | tokens.css | … |
| --tracking-display | tokens.css | … |
Accessibility
- The title is the page's h1; the layout renders the main landmark.
Do and don't
Do
- One primary action, full width, size lg.
Don't
- Don't put navigation inside the card beyond the back link.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open auth-card.md