Settings sidebar

Grouped settings with a sliding highlight and the picked section beside them; a select on phones.

$ pnpm dlx shadcn@latest add @dashral/settings-sidebar

When to use

A settings page: grouped sections with a sliding highlight, and the section you pick beside them.
Account and workspace settings with several sections; a select takes over on phones.

When not to use

An app's main navigation: Dashboard sidebar.
Settings with two or three sections: tabs are enough.

Usage

Settings sidebar with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { SettingsSidebar } from "@/components/dashral/blocks/settings-sidebar"
2
3<SettingsSidebar
4  groups={settingsGroups}
5  current={section}
6  onNavigate={(id) => router.push(`/settings/${id}`)}
7  content={(page) => <SettingsSection id={page.id} />}
8/>

API reference

SettingsSidebar

A settings page: grouped sections on the left with a highlight that slides to the one you pick, and that section on the right. On phones the sections are a select above the content. Your sections come in groups, the one shown is controllable (onNavigate when it changes), and content renders each one; the sample forms render without it.

Prop	Type	Default
`groups`	`SettingsGroup[]`	`sample`
`current`	`string` The section shown, by id (the block keeps it without it).	—
`onNavigate`	`(id: string) => void`	—
`content`	`(page: SettingsPage) => React.ReactNode`	`sample`

type SettingsPage

One settings section: its place in the nav and the title above its content.

Prop	Type	Default
`id`	`string`	—
`label`	`string`	—
`icon`	`React.ReactNode`	—
`description`	`string`	—
`badge`	`React.ReactNode`	—
`count`	`number`	—

type SettingsGroup

Prop	Type	Default
`label`	`string`	—
`pages`	`SettingsPage[]`	—