Inset group
A settings form's grouped rows, as System Settings draws them
Notifications
Show previewsMessage text on the lock screen
Badge app icon
Sounds
Usage
import { InsetGroup, InsetGroupRow } from "@gpuixui/components/inset-group";
<InsetGroup title="Notifications">
<InsetGroupRow
label="Show previews"
description="Message text on the lock screen"
control={<Switch label="Show previews" />}
/>
<InsetGroupRow label="Badge app icon" control={<Switch label="Badge app icon" />} />
</InsetGroup>;Composition
InsetGroup
├── title (optional)
└── box — rounded card, hairline edge
└── InsetGroupRow × n — label leading, control trailing, a hairline between rowsAPI
| Part | Prop | Type | Default |
|---|---|---|---|
InsetGroup | title | string | — |
InsetGroup | titleTone | "strong" | "muted" — a muted caption reads as System Settings' section label | "strong" |
InsetGroup | elevated | boolean — lifts the box on the theme's md shadow | false |
InsetGroup | insetDividers | boolean — hairlines stop short of the box's edges | false |
InsetGroup | children | ReactNode — the InsetGroupRows | — |
InsetGroupRow | label | string | — |
InsetGroupRow | description | string — a secondary line | — |
InsetGroupRow | control | ReactNode — a switch, a select, a segmented control | — |
Edit this page on GitHubpackages/components/docs/inset-group.mdx