@edux-design/chrome

@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

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

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

export function AppChrome() {
  return (
    <Sidebar defaultExpanded>
      <SidebarHeader logo={<span className="text-lg font-bold">Edux</span>} />

      <SidebarSection title="Workspace">
        <SidebarItem icon={<Users />} label="People" active />
        <SidebarItem icon={<Settings />} label="Settings" />
      </SidebarSection>

      <SidebarFooter>
        <button className="text-sm">Logout</button>
      </SidebarFooter>
    </Sidebar>
  );
}

Features

• 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

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.