Titled groupings for control panels and inspectors.
Also known as: inspector section, panel group, control section, settings section
Install with the CLI, or copy the component source into your project.
Add panel-section (npm)
1npx --yes -p @default-file/ui df-ui add panel-section
Titled group for control panels.
Motion
Titled grouping for control panels.
| Prop | Type | Default | Notes |
|---|---|---|---|
| title | string | - | Section heading (required). |
| children | ReactNode | - | Section body content (required). |
| className | string | - | Additional styles on the section shell. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --border | CSS color | var(--df-neutral-100) | Section divider. |
| --muted-foreground | CSS color | var(--df-neutral-500) | Section title color. |
| --spacing-unit | CSS length | 0.25rem | Base unit for padding and gap. |