Skip to content
SettingsSettings panelMenu

Settings panel

The settings layout for an AI app: a sections nav and panes, with groups, rows, switches and segmented controls. The nav moves above the pane when the panel is narrow.

Markdown
On this page
A finished settings surface: general, personalization, memory, connectors, project knowledge, usage and data controls, all live.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/settings-panel.json

Usage

tsx
import {
  SettingsGroup,
  SettingsNav,
  SettingsNavItem,
  SettingsPane,
  SettingsPanel,
  SettingsRow,
  SettingsSwitch,
} from "@/components/ui/chatcn/settings-panel"

<SettingsPanel defaultValue="general" className="h-[640px]">
  <SettingsNav title="Settings">
    <SettingsNavItem value="general" icon={<SettingsIcon />}>General</SettingsNavItem>
    <SettingsNavItem value="memory" icon={<MemoryIcon />} meta={24}>Memory</SettingsNavItem>
  </SettingsNav>
  <SettingsPane value="general" title="General">
    <SettingsGroup title="Chat">
      <SettingsRow label="Send with Enter" description="Shift+Enter adds a new line.">
        <SettingsSwitch defaultChecked />
      </SettingsRow>
    </SettingsGroup>
  </SettingsPane>
  <SettingsPane value="memory" title="Memory">…</SettingsPane>
</SettingsPanel>

The layout follows the space it is given, not the viewport: a container query puts the nav in a column at 42 rem and wider, and in a scrolling row above the pane below that. Give the panel a height and each pane scrolls on its own.

Examples

Layout on its own

Sections nav, panes, groups and rows with switches and segmented controls. The nav moves above the pane when narrow.

Parts

PartNotes
SettingsPanelRoot. value, defaultValue, onValueChange pick the open section
SettingsNavtitle above the sections, footer pinned under them in the column layout
SettingsNavItemvalue, icon, meta (a count or a word after the label)
SettingsNavSeparatorHairline between groups of sections, column layout only
SettingsPanevalue, title, description, actions
SettingsGrouptitle, description, action. Rows separated by hairlines, no card
SettingsRowlabel, description, note, disabled, stacked for wide controls
SettingsSwitchBase UI Switch. Names itself from the row's label and description
SettingsSegmentedoptions, value, defaultValue, onValueChange, size xs or sm

Keyboard

KeyAction
Up, DownMove between sections in the column layout
Left, RightMove between sections in the row layout
Enter, SpaceOpen the focused section, toggle a switch
Arrow keys in a segmented controlMove and select

Accessibility

  • The nav is a Base UI tablist inside a nav landmark; arrow key orientation follows the layout, measured with a ResizeObserver.
  • Each group is a section labelled by its title. Switches and segmented controls take aria-labelledby and aria-describedby from their row, so the label is read once and the description after it.
  • Segmented controls are native radio inputs. Switches get a 44 px hit area on touch without changing the drawing.

Motion

  • Panes swap instantly and the active section fill does not transition: people flip between sections often, usually from the keyboard.
  • The switch thumb slides 150 ms with the track filling with ink. Under reduced motion it snaps.