Settings Shell

The canonical settings layout: grouped navigation down a fixed sidebar on desktop, a compact Select on mobile, and one scroll-safe content lane. Works equally inside a dialog or as a full page. The host owns the active panel and the dialog lifecycle; YunUI owns all navigation spacing, the active indicator, and the responsive switch.

Import

1import { SettingsShell, type SettingsNavGroup } from "@yuhuanowo/yunui/patterns";

Basic

It's controlled: pass value (the active item key) and onValueChange. Sections come from groups, each with an optional label and its items (key, label, optional icon). Resize the frame to see the sidebar collapse into the mobile picker.

Shape

1const groups: SettingsNavGroup[] = [
2  {
3    key: "account",
4    label: "Account",
5    items: [
6      { key: "profile", label: "Profile", icon: User },
7      { key: "billing", label: "Billing", icon: CreditCard },
8    ],
9  },
10  { key: "workspace", label: "Workspace", items: [/* … */] },
11];
12 
13<SettingsShell
14  header={<DialogTitle>Settings</DialogTitle>}
15  groups={groups}
16  value={tab}
17  onValueChange={setTab}
18>
19  {renderPanel(tab)}
20</SettingsShell>

The header slot takes the host's own heading primitive (e.g. a DialogTitle for accessibility inside a modal). It fills its parent's height (h-full), so give it a bounded container — a sized dialog body or a flex page region.

Props