Layout and structure

Sidebar

The application shell navigation — 23 exports covering the rail, the collapsed icon state and the mobile drawer.

Available

Needs mock props

Dual breakpoint

Examples

This component's Storybook stories, embedded. They are the maintained source for its states, so Lantern shows them rather than keeping a duplicate set.

Sidebar

Rendered live from Storybook

Open

Storybook must be running for this to load — npm run storybook from the repo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.

Reference

Transcribed from the component audit. If this disagrees with the source, the source is right.

Source: src/components/ui/sidebar.tsx
Portability: Needs its app dependencies replaced by props before it renders in isolation.
Variants: sidebar / floating / insetoffcanvas / icon / noneleft / right
States to cover: expandedcollapsed icon railmobile sheet draweractive itemtooltip when collapsedbadgehover actionskeleton rowssubmenu
Dependencies: @radix-ui/react-slotclass-variance-authoritylucide-react
Props the port adds: isMobile, persist=false (drops the cookie write), enableKeyboardShortcut=false (drops the global ⌘B listener), SidebarMenuSkeleton.width (drops Math.random)
Responsive: Carries a load-bearing max-md: / md: pair. Sign off at both viewports — see the rule.
Notes: The largest single port — 638 lines, responsive pairs on 8 sub-parts, and it needs the whole sidebar-* token family.