@edux-design/chrome

Responsive sidebar primitives (Sidebar, SidebarHeader, SidebarSection, SidebarItem, SidebarFooter) used to build the application chrome in Edux products. The components manage expand/collapse state, tooltips for the collapsed view, and consistent spacing/focus styles.

---

Installation

``bash
pnpm add @edux-design/chrome @edux-design/utils @edux-design/tooltips @edux-design/icons


or


npm install @edux-design/chrome @edux-design/utils @edux-design/tooltips @edux-design/icons
`

Peer deps: react@^19.1.0, react-dom@^19.1.0.

---

Usage

`jsx
import {
Sidebar,
SidebarHeader,
SidebarSection,
SidebarItem,
SidebarFooter,
} from "@edux-design/chrome";
import { Users, Settings } from "@edux-design/icons";

export function AppChrome() {
return (

Edux} />


} label="People" active />
} label="Settings" />



Logout


);
}
`

$3

- Internal context tracks isExpanded and exposes a toggle button in SidebarHeader.
- When collapsed, items show tooltips (via @edux-design/tooltips) so labels remain discoverable.
- Sections automatically hide their titles when collapsed to keep the column skinny.
- Footer content sticks to the bottom for account/profile controls.

---

Development

`bash
pnpm --filter @edux-design/chrome lint
pnpm --filter @edux-design/chrome check-types
pnpm --filter @edux-design/chrome build
`

Stories live at src/demos/Sidebar.stories.jsx and cover both expanded/collapsed states.

---

Notes

- SidebarItem renders a focusable list item (TooltipTrigger). Pass onClick or wrap it with routing logic (e.g., next/link via asChild support if needed).
- The TODOs inside Sidebar.jsx` (avatar presets, padding fixes) are good starter issues if you need enhancements.
- Because the layout relies on Tailwind tokens, keep overrides minimal to avoid drift between apps.