← All examples

Sign-in screen

A complete auth form with email validation, social providers, and a stubbed submit handler.

Beta

Welcome back

Sign in to your useVyre account.

Forgot password?
or continue with

Don't have an account? Create one

Components used

  • Card — outer container (elevated)
  • Input + Field — email & password with validation state
  • Checkbox — "Remember me" toggle
  • Alert — submission feedback (variant="info")
  • Badge — Beta tag (variant="teal")
  • Separator — divider between primary form and providers
  • Button — submit (accent) and providers (secondary)

Prompt that produces this layout

Build a sign-in screen with useVyre:
- Card variant="elevated", max-width 420px, centered
- Logo + Beta badge in the header
- Email field with validation hint (state="error" when invalid)
- Password field with autocomplete
- "Remember me" checkbox + "Forgot password?" link on one row
- Primary "Sign in" button (full width, variant="accent")
- Separator divider with "or continue with" text
- Two secondary buttons: GitHub, Google
Validation pattern: useVyre form fields use state="error" | "success" | "warning" on the Field wrapper plus a hint prop for the message — this is the exact pattern an AI agent will reach for when it has the context file installed.