Settings Page

Multi-section settings page with sidebar navigation, grouped form fields, and save actions.

Preview

General

Basic information about your workspace.

Workspace name

URL slug

Branding

Colors and assets used across the product.

Brand color

Logo URL

Team

Seat counts and default permissions for new members.

Seats

Default role

Integrations

Third-party services connected to this workspace.

GitHub org

Slack channel

Danger zone

Irreversible actions. Type "delete me" to arm the delete button.

Confirmation phrase

When to Use

User profile and account settings
Application preferences and configuration
Team or organization settings

Components Used

Structure

<div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: "var(--spacing-8)" }}>
  <nav>
    <Tabs orientation="vertical" defaultValue="profile">
      <TabsList>
        <TabsTrigger value="profile">Profile</TabsTrigger>
        <TabsTrigger value="notifications">Notifications</TabsTrigger>
        <TabsTrigger value="security">Security</TabsTrigger>
      </TabsList>
    </Tabs>
  </nav>

  <div>
    <Card>
      <CardHeader>
        <CardTitle>Profile</CardTitle>
        <CardDescription>Manage your public profile information.</CardDescription>
      </CardHeader>
      <CardContent>
        <Fieldset>
          <Field>
            <FieldLabel htmlFor="name">Display name</FieldLabel>
            <Input id="name" defaultValue={user.name} />
          </Field>
          <Field>
            <FieldLabel htmlFor="bio">Bio</FieldLabel>
            <Textarea id="bio" defaultValue={user.bio} />
          </Field>
        </Fieldset>
        <Separator />
        <Fieldset legend="Notifications">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span>Email notifications</span>
            <Switch checked={emailNotifications} onCheckedChange={setEmailNotifications} />
          </div>
        </Fieldset>
      </CardContent>
      <CardFooter>
        <Button onClick={handleSave}>Save changes</Button>
      </CardFooter>
    </Card>
  </div>
</div>

Notes

Use vertical Tabs for sidebar navigation on desktop.
On mobile, switch to horizontal Tabs or an accordion layout.
Group related fields with Fieldset and separate sections with Separator.
Place the save Button in CardFooter, aligned to the right.
Use Avatar at the top of the profile section for photo upload.