Back to cookbook
Recipe

Build a login screen

You need a centered login form with email + password + 'Continue with Google'.

Recommended:
Cursor
Claude

Prompt

Use @gunjo/ui. Reference https://gunjo.dev/api/specs/inputs/form for Form composition.

Build a centered login screen:
- Outer: full-height centered Card (max-width 380px, p-8)
- Title: "Welcome back" (text-2xl font-bold)
- Subtitle: muted text "Sign in to continue"
- Form with Input (type=email) + Input (type=password) + Button (full width, bg-primary)
- Below: a Separator with "or" label, then a secondary outline Button with Google logo "Continue with Google"
- Footer link: "Don't have an account? Sign up"

Use semantic tokens. Make Tab order correct (email → password → submit).

Expected output

A clean login screen using Form, Input, Button, Separator, Card.

Components used

Form
Input
Button
Separator
Card