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 consisten
npm install @edux-design/chromeResponsive 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.
---
``bash`
pnpm add @edux-design/chrome @edux-design/utils @edux-design/tooltips @edux-design/iconsor
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.
---
`jsx
import {
Sidebar,
SidebarHeader,
SidebarSection,
SidebarItem,
SidebarFooter,
} from "@edux-design/chrome";
import { Users, Settings } from "@edux-design/icons";
export function AppChrome() {
return (
);
}
`
- Internal context tracks isExpanded and exposes a toggle button in SidebarHeader.@edux-design/tooltips
- When collapsed, items show tooltips (via ) 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.
---
`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.
---
- SidebarItem renders a focusable list item (TooltipTrigger). Pass onClick or wrap it with routing logic (e.g., next/link via asChild support if needed).Sidebar.jsx` (avatar presets, padding fixes) are good starter issues if you need enhancements.
- The TODOs inside
- Because the layout relies on Tailwind tokens, keep overrides minimal to avoid drift between apps.