# Account Settings

> An account settings screen with a sidebar, breadcrumb, grouped settings panel, team member management and usage meters.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/templates/account-settings
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/account-settings.json
```

Adds the page at `app/account-settings/page.tsx` together with the components below. Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Components

- [App Sidebar](https://chromotion.dev/r/app-sidebar.md): `@/components/app-sidebar`
- [Breadcrumb](https://chromotion.dev/r/breadcrumb.md): `@/components/breadcrumb`
- [Settings Panel](https://chromotion.dev/r/settings-panel.md): `@/components/settings-panel`
- [Team Members](https://chromotion.dev/r/team-members.md): `@/components/team-members`
- [Usage Meter](https://chromotion.dev/r/usage-meter.md): `@/components/usage-meter`

## Dependencies

```bash
npm install lucide-react
```

## Source

```tsx title="app/account-settings/page.tsx"
"use client"

import { CreditCard, Hexagon, House, Palette, Settings, ShieldCheck, Users } from "lucide-react"

import { AppSidebar } from "@/components/app-sidebar"
import { Breadcrumb } from "@/components/breadcrumb"
import { SettingsPanel, type SettingSection } from "@/components/settings-panel"
import { TeamMembers, type Member } from "@/components/team-members"
import { UsageMeter } from "@/components/usage-meter"

const sections: SettingSection[] = [
  {
    title: "Appearance",
    description: "How the workspace looks on this device.",
    fields: [
      {
        type: "segmented",
        key: "theme",
        label: "Theme",
        options: [
          { value: "light", label: "Light" },
          { value: "dark", label: "Dark" },
          { value: "system", label: "System" },
        ],
      },
      { type: "switch", key: "compact", label: "Compact mode", description: "Tighter spacing in lists and tables." },
    ],
  },
  {
    title: "Notifications",
    description: "Choose what reaches your inbox.",
    fields: [
      { type: "switch", key: "email", label: "Email notifications", description: "Mentions, replies and assignments." },
      { type: "switch", key: "push", label: "Push notifications" },
      {
        type: "select",
        key: "digest",
        label: "Digest frequency",
        options: [
          { value: "daily", label: "Daily" },
          { value: "weekly", label: "Weekly" },
          { value: "never", label: "Never" },
        ],
      },
    ],
  },
]

const members: Member[] = [
  { id: "1", name: "Ada Lovelace", email: "ada@hexa.dev", role: "owner" },
  { id: "2", name: "Grace Hopper", email: "grace@hexa.dev", role: "admin" },
  { id: "3", name: "Alan Turing", email: "alan@hexa.dev", role: "member" },
  { id: "4", name: "Margaret Hamilton", email: "margaret@hexa.dev", role: "viewer" },
]

export default function AccountSettings() {
  return (
    <AppSidebar
      collapseBelow={768}
      brand={
        <>
          <Hexagon className="size-5 shrink-0 fill-primary text-primary" /> Hexa
        </>
      }
      brandIcon={<Hexagon className="size-5 shrink-0 fill-primary text-primary" />}
      groups={[
        {
          label: "Account",
          items: [
            { label: "General", href: "#", icon: <Settings />, active: true },
            { label: "Appearance", href: "#", icon: <Palette /> },
            { label: "Security", href: "#", icon: <ShieldCheck /> },
          ],
        },
        {
          label: "Workspace",
          items: [
            { label: "Members", href: "#", icon: <Users /> },
            { label: "Billing", href: "#", icon: <CreditCard /> },
          ],
        },
      ]}
      user={{ name: "Ada Lovelace", email: "ada@hexa.dev", initials: "AL" }}
      accentColor="var(--ring)"
    >
      <div className="flex flex-col gap-1 border-b bg-background px-6 py-4">
        <Breadcrumb
          items={[
            { label: "Hexa", href: "#", icon: <House className="size-3.5" /> },
            { label: "Settings", href: "#" },
            { label: "General" },
          ]}
        />
        <h1 className="mt-2 text-xl font-semibold tracking-tight">Settings</h1>
        <p className="text-sm text-muted-foreground">Manage your preferences, your team and your plan.</p>
      </div>

      <div className="grid gap-8 p-6 xl:grid-cols-[minmax(0,1fr)_340px]">
        <div className="flex min-w-0 flex-col gap-8">
          <SettingsPanel
            sections={sections}
            initialValues={{ theme: "system", compact: false, email: true, push: false, digest: "weekly" }}
          />
          <TeamMembers members={members} />
        </div>
        <aside className="flex flex-col gap-5">
          <UsageMeter
            title="Storage"
            unit="GB"
            limit={100}
            segments={[
              { label: "Projects", value: 38, color: "#6366f1" },
              { label: "Media", value: 29, color: "#06b6d4" },
              { label: "Backups", value: 12, color: "#f59e0b" },
            ]}
          />
          <UsageMeter
            title="Build minutes"
            unit="min"
            limit={6000}
            segments={[
              { label: "Production", value: 3800, color: "#10b981" },
              { label: "Preview", value: 1900, color: "#8b5cf6" },
            ]}
          />
        </aside>
      </div>
    </AppSidebar>
  )
}
```