components/ui/lumen/sidebar.tsx

The source ships with Pro.

The preview above is the real component. Its source installs into your repo with one command once you own it.

78 more Pro pieces in Lumen HaloEvery story chart, block and screen in the same language. Previews are live for everyone; the code comes with Pro.See the plans

SidebarProv1.0.0

shadcn's Sidebar, cut from Lumen glass: a smoked-glass panel where a lens glides to the active page and lights a filament on its edge, sub-pages light their stretch of the guide line, and the rail glows as you reach for it. Collapses off-canvas or to icons with tooltips, becomes a sheet on phones, remembers its state and toggles on ⌘B.

Built on shadcn/ui

.md

Add to your project

pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-sidebar

Needs your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.

Preview

Customize

Try Lumen in your brand. The preview follows on every page; copy the CSS when it's right.

Accent

Corners

Font

/* Lumen as drawn: nothing to change. */

Props

defaultOpen / open / onOpenChange (SidebarProvider)true
boolean
Expanded or collapsed; saved in the sidebar_state cookie.
side"left"
"left" | "right"
Which edge.
variant"sidebar"
"sidebar" | "floating" | "inset"
Flush panel, floating glass, or the page inset as a card.
collapsible"offcanvas"
"offcanvas" | "icon" | "none"
Slide away, shrink to icons, or stay.
isActive / tooltip / size (SidebarMenuButton)–
boolean / string | TooltipContent props / "default" | "sm" | "lg"
The lit page; the tooltip shown when collapsed to icons.
showOnHover (SidebarMenuAction)false
boolean
Reveal the item's action on hover or focus.

Anatomy

Same exports, props and data-slots as shadcn per base (render in Base UI, asChild in Radix).
Built from Lumen Button, Input, Separator, Sheet, Skeleton and Tooltip; the lens is Lumen's active indicator.
Skeleton widths come from useId, so server and client agree (shadcn's are random).

SidebarProvider / useSidebardata-slot="sidebar-wrapper"
State, cookie and ⌘B.
Sidebardata-slot="sidebar"
The panel (desktop) or sheet (phone).
SidebarHeader / SidebarContent / SidebarFooterdata-slot="sidebar-content"
Regions.
SidebarGroup / SidebarGroupLabel / SidebarGroupAction / SidebarGroupContentdata-slot="sidebar-group"
Sections.
SidebarMenu / SidebarMenuItem / SidebarMenuButton / SidebarMenuAction / SidebarMenuBadge / SidebarMenuSkeletondata-slot="sidebar-menu"
Pages, with the lens.
SidebarMenuSub / SidebarMenuSubItem / SidebarMenuSubButtondata-slot="sidebar-menu-sub"
Sub-pages on the guide line.
SidebarTrigger / SidebarRail / SidebarInset / SidebarInput / SidebarSeparatordata-slot="sidebar-trigger"
Toggle, edge, page and extras.

Part of

Sidebar is part of

Get it with any of these. Pro pieces are not sold one at a time.

Lumen HaloSystem · 121 piecesIncluded in All-Access
All-Access LifetimeEvery system and pack, up to 10 developers$79 launch price

Compare options

Changelog

v1.0.0 · 2026-09-30All 1 entries

v1.0.0 · 2026-09-30
First release: shadcn's Sidebar in Lumen Halo

Keyboard

⌘B / Ctrl+B: Collapse or expand
Tab: Through the buttons and actions
Escape: Close the phone sheet

More in Navigation

Nav

App Sidebar

Footer