Design System

Settings layout

Two-column shell for every /settings surface: 240px left-rail nav on the left, content panel on the right. Lifted into packages/ui so patient, provider, and HQ compose the same shape.

Click a nav item below to see the active-state shift. In a real app, next.js routing drives the active item via usePathname().

import from @halwel/ui/components/dashboard/SettingsLayout

Variants

Live demo — click the rail

Profile

Body of the profile tab. Composes any existing primitives — portal cards, form fields, status rows. The layout is just the rail + panel shell.

Example content: a profile field group would go here.

The panel switches based on the active item. Each nav item is a Link in production; the demo overrides currentPath so the page doesn't actually navigate.