Components / Blocks / SettingsLayout
Settings
FreeBlockA responsive settings shell with local navigation, page context, and a focused content region.
Demo dataResponsive
Settings
Manage your personal account.
Shown across your workspace.
Installation
pnpm dlx shadcn@latest add https://elements.micropreneur.dev/r/settings-layout.jsonThe shadcn CLI writes the source into your project. Files added:
- components/blocks/settings-layout.tsxblock
- lib/utils.tslib
Dependenciesclsxtailwind-merge
API
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | ReactNode | — | |
| description | ReactNode | — | |
| heading (required) | ReactNode | — | |
| items (required) | readonly SettingsLayoutItem[] | — |
Also accepts ComponentProps<'section'>.
SettingsLayoutItem
| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | — | |
| description | string | — | |
| href (required) | string | — | |
| label (required) | string | — |
Accessibility
- Local navigation is a labelled nav landmark ("Settings").
- The active section sets aria-current="page", and the heading renders as a level-two heading.