Settings Page
A tabbed settings page with Profile, Preferences, and Notifications tabs. Uses FormField, Switch, and Tabs components.
Preview
Settings
Manage your preferences.
AT
Alex Thompson
alex@example.com
Installation
npx shadcn@latest add @shadszn/settings-pageFiles Installed
settings-page/page.tsx-- Complete settings page with three tabs
Key Features
- Profile tab with avatar, name, email, and bio fields
- Preferences tab with Dark Mode, Compact View, and Reduced Motion toggles
- Notifications tab with Email, Push, Weekly Digest, and Security Alerts toggles
- Uses Card, Tabs, FormField, Input, Switch, Separator, and Button components
Customization
// Add your own tabs by extending the Tabs component
<Tabs defaultValue="profile">
<TabsList>
<TabsTrigger value="profile">Profile</TabsTrigger>
<TabsTrigger value="preferences">Preferences</TabsTrigger>
<TabsTrigger value="notifications">Notifications</TabsTrigger>
<TabsTrigger value="billing">Billing</TabsTrigger>
</TabsList>
{/* Add TabsContent for each tab */}
</Tabs>
// Wire up form persistence
const handleSave = async () => {
await updateProfile({ name, email })
toast({ title: "Saved!", variant: "success" })
}