Back to cookbook
Recipe

Settings page with tabs

You need an account settings page with three tabs: Profile, Notifications, Billing.

Recommended:
Cursor
v0

Prompt

Use @gunjo/ui. Reference https://gunjo.dev/api/specs/navigation/tabs and https://gunjo.dev/api/specs/patterns/settings-template.

Build /account/settings:
- Title "Settings" + description
- Tabs (defaultValue=profile) with: Profile, Notifications, Billing
- Profile tab: Form with Avatar+upload, Input(name), Input(email, disabled), Textarea(bio). Save button bottom-right.
- Notifications tab: list of toggle rows with Label + Switch (Email digest, Push, Mentions, Weekly summary).
- Billing tab: 3 PricingTemplate cards (Free/Pro/Team) with current plan highlighted by border-primary.

Use semantic tokens throughout.

Expected output

A settings page using Tabs, Form, Avatar, Textarea, Switch, PricingTemplate.

Components used

Tabs
Form
Avatar
Textarea
Switch
PricingTemplate