# Settings panel (goodtabs UI)

A bordered surface of settings rows, label and help on the left, the control on the right.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/settings-panel.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/settings-panel`

## Usage

```tsx
import { SettingsPanel, SettingsRow } from "@/components/ui/settings-panel"
import { Switch } from "@/components/ui/switch"

<SettingsPanel title="Notifications">
  <SettingsRow label="Weekly digest" description="One email a week." htmlFor="digest">
    <Switch id="digest" defaultChecked />
  </SettingsRow>
</SettingsPanel>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `ReactNode` |  | Title in the bar across the top. Omit for a plain frame. |
| description | `ReactNode` |  | One line under the title. |
| children | `ReactNode` |  | SettingsRow elements. Hairlines are drawn between them. |
| label | `ReactNode` |  | On SettingsRow: the setting name. |
| description | `ReactNode` |  | On SettingsRow: what the setting does, one line. |
| htmlFor | `string` |  | On SettingsRow: id of the control, so the label focuses it. |
| children | `ReactNode` |  | On SettingsRow: the control, on the right from sm up. |

## When to use

- Preferences and account pages with a handful of toggles and small controls
- A danger zone with one or two destructive actions
- Any list of settings that each fit on one line with their control

## When not to use

- Long forms with text fields and a save bar, which want the form section
- Settings that need more than one control per row
- Read-only key and value pairs, which want a description list

## Notes for agents

- Server component with no state; controls manage their own state or get it from a parent
- Pass htmlFor with the control's id so the label focuses it; buttons do not need it
- Controls sit on the right from sm up and drop under the label below that; keep inputs to a fixed width like w-44
- For a destructive action use a solid bg-destructive text-background button, not the soft destructive variant

Docs: https://ui.goodtabs.co/components/settings-panel