Settings Section

Notifications

Choose what reaches your inbox.

Approval requests

When an agent waits for you to allow an action.

Weekly digest

A Monday summary of runs and spend.

Installation

pnpm dlx shadcn@latest add @paneui/settings-section

Usage

import {
  SettingsGroup,
  SettingsRow,
  SettingsRowDescription,
  SettingsRowLink,
  SettingsRowText,
  SettingsRowTitle,
  SettingsSection,
  SettingsSectionHeader,
  SettingsSectionTitle,
} from "@/components/ui/settings-section"

<SettingsSection>
  <SettingsSectionHeader>
    <SettingsSectionTitle>Notifications</SettingsSectionTitle>
  </SettingsSectionHeader>
  <SettingsGroup>
    <SettingsRow render={<label />}>
      <SettingsRowText>
        <SettingsRowTitle>Weekly digest</SettingsRowTitle>
        <SettingsRowDescription>Every Monday at 9:00.</SettingsRowDescription>
      </SettingsRowText>
      <Switch />
    </SettingsRow>
  </SettingsGroup>
</SettingsSection>

Composition

SettingsNav
└── SettingsNavItem
SettingsSection
├── SettingsSectionHeader
│   ├── SettingsSectionTitle
│   └── SettingsSectionDescription
└── SettingsGroup
    ├── SettingsRow (or SettingsRowLink)
    │   ├── SettingsRowText (Title, Description)
    │   └── SettingsRowControl or any control
    └── SettingsGroupFooter
        └── SettingsFooterNote

Examples

Danger Zone

Use for actions that delete data or can't be undone.

Interactive Rows

Use when a row opens a page, a dialog or a link.

Settings Nav

Rows

A row wraps its control under the text on narrow screens. Render it as a <label> (render={<label />}) so clicking anywhere toggles its switch.

Nav

Below md the settings nav becomes a horizontally scrolling strip.

Interactive rows

An interactive row is one <button> (or the element render gives): it takes the hover and press fill, an inset focus ring and a trailing chevron that flips in right-to-left layouts. Keep other controls out of it.

API Reference

SettingsGroup

Also accepts every prop of div.

tone= "default": "default" | "destructive"; Destructive ring for a danger zone.

Prop	Type	Default	Description
tone	"default" \| "destructive"	"default"	Destructive ring for a danger zone.

SettingsRow

Min 56px row with a hairline between rows. Also accepts every prop of div (useRender).

render: ReactElement; Render as another element, e.g. <label /> or a router link.
interactive= false: boolean; The row is the control: a <button> by default, with hover and press fill, focus ring and chevron.
detail: ReactNode; Muted trailing text before the chevron, such as the current value.
chevron= true: boolean; Show the chevron on an interactive row.

Prop	Type	Default	Description
render	ReactElement	—	Render as another element, e.g. `<label />` or a router link.
interactive	boolean	false	The row is the control: a `<button>` by default, with hover and press fill, focus ring and chevron.
detail	ReactNode	—	Muted trailing text before the chevron, such as the current value.
chevron	boolean	true	Show the chevron on an interactive row.

data-interactive: Present on an interactive row.

Data attribute	Description
data-interactive	Present on an interactive row.

SettingsRowLink

Interactive row that renders an <a> and takes every anchor attribute; pass render for a router link. Also accepts every prop of a.

target: string; _blank without rel adds rel="noopener noreferrer".
external= false: boolean; An external-link icon instead of the chevron.
detail: React.ReactNode; Same as SettingsRow.
chevron= true: boolean; Same as SettingsRow.

Prop	Type	Default	Description
target	string	—	`_blank` without `rel` adds `rel="noopener noreferrer"`.
external	boolean	false	An external-link icon instead of the chevron.
detail	React.ReactNode	—	Same as `SettingsRow`.
chevron	boolean	true	Same as `SettingsRow`.

SettingsGroupFooter

Muted band for Save / Cancel; with a SettingsFooterNote the note sits left. Also accepts every prop of div.

SettingsNavItem

Also accepts every prop of a (useRender).

isActive: boolean; Current page.
icon: ReactNode; 16px solid icon.
render: ReactElement; Your router link.

Prop	Type	Default	Description
isActive	boolean	—	Current page.
icon	ReactNode	—	16px solid icon.
render	ReactElement	—	Your router link.