Sitewright

Auth card

A sign-in, sign-up and one-time-code card with validated fields (messages on the field), password reveal, remember me, provider buttons in stacked, inline or grid layout, and an optional split with artwork.

What it is for

Sign-in, sign-up or verify pages and modals (400px wide, or 880px split).

Use it

1 · site.json
"effects": { "components": ["auth-card"] }
or on the command line
node ~/.claude/skills/sitewright/scripts/scaffold.mjs --config site.json --out ./my-site --components auth-card
2 · import it
import { AuthCard } from '@/components/fx/ui';

Files

  • components/fx/ui/AuthCard.tsx
  • components/fx/ui/_bui.tsx
  • components/fx/ui/LICENSE-boardui.txt
  • ui-bui-base.css styles
  • ui-auth-card.css styles

Source

Adapted from BoardUI (MIT). Restyled in plain CSS and rewritten without its libraries; the upstream licence and notice are kept (see THIRD_PARTY_NOTICES.md).

Credits and licences: third-party notices.

Accessibility

  • Keyboard. Components in the kit are written to be reached and used with the keyboard. Try it: press Tab inside the preview.
  • Reduced motion. With prefers-reduced-motion on, animation settles to its finished state at once.
  • Touch. Pointer-follow effects are skipped on touch screens; controls stay finger-sized.