Sidebar Components

Dev Design Library indexes 124 sidebar components from 46 open-source UI libraries, with the most coming from shadcn/ui, Intent UI, Nexvyn UI, Tremor Blocks and ReUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Sidebar components belong to the Navigation group.

Showing 120 of 124, a mix from every library. Open a library to see all of its components.

• Dashboard 01shadcn/ui · ReactA dashboard with sidebar, charts and data table.
• Line SidebarReact Bits · ReactStatic list navigation with a cursor-proximity effect that shifts and highlights nearby items.
• Side NavReact Spectrum · ReactA SideNav provides users with a way to navigate nested hierarchical set of links.
• Sidebarcoss ui · React
• Side PanelCult UI · ReactSliding side panel component with customizable positioning and animations
• Application shell with a workspace switcherReUI · ReactGrouped navigation with count badges, row menus and a footer account menu.
• Draggable Side NavLobe UI · ReactA generic resizable side panel container with collapse/expand functionality. Supports custom header, body, and footer…
• sidebarIntent UI · Reactsidebar
• App NavigationUntitled UI React · React
• Ai SidebarbeUI · ReactComposes the shell with editable projects, folders, files, and bookmarks.
• SidebarTailGrids · ReactA reusable, responsive, and accessible sidebar component.
• Bounce SidebarRare UI · ReactA vertical navigation list with a bouncy, spring-animated active indicator.
• Conversation ListSpectrum UI · ReactA date-grouped conversation sidebar with pinning.
• SidebarVengeance UI · React
• Settings Dialog (Sidebar in a Dialog)Fluid Functionalism · ReactA settings dialog: the xl Dialog as a canvas, a non-collapsing Sidebar of sections down its left edge, and a scrolling…
• SidebarToolcraft · React
• Collapsible 02 - Dashboard SidebarShadcn Space · ReactA dashboard sidebar with collapsible nav sections, active item highlighting, notification badges, and a user profile…
• Claude SidebarPixel Perfect · ReactClaude-style sidebar built on shadcn/ui's <Sidebar> primitives. Smooth icon-rail collapse animation, playful icon…
• App ShellBoardUI · ReactThe page standard every BoardUI template follows, free or Pro: content sits directly on the page background inside a…
• Page Shell 01Tremor Blocks · React
• SidebarShadcn Dashboard · React
• SidebarObsidianUI · React
• OpenCode SidebarNotra · ReactSession title, context usage, a collapsible MCP list, LSP state, cwd with branch and version.
• Sidebars 01Oxbow UI · Astro
• Bounce SidebarNexvyn UI · ReactA sidebar navigation with a bouncing dot indicator that smoothly animates between items using spring physics.
• SidebarShark UI · ReactA sidebar for navigation and app structure.
• Flower SidebarRewamp UI · React
• Macos SidebarWatermelon UI · React
• App Shell 2sv-efferd · SvelteA compact dashboard shell with a collapsible sidebar, sticky header, and structured content skeleton.
• Glass Sidebarglasscn · ReactGlass Sidebar with five variants: clear, frosted, subtle, liquid, and liquid-refract
• Collapsible SidebarUI Lab · ReactFolds down to an icon rail, with labels that step aside before it closes.
• SidebarHextaUI · ReactAn app sidebar that collapses to icons or off canvas, stays pinned under your header, and becomes a swipeable sheet on…
• ArtifactLocalMode · ReactA Claude-style docked side-panel/canvas shell (header, title, description, copy/download/refresh/close toolbar…
• Compact dashboardCojeev UI · ReactHistorical compatibility alias for WorkSidePanel; use the dedicated panel composition in new work.
• Spotlight IndicatorMicroKit · ReactA glowing rail that slides to the active item in a vertical nav — the same indicator powering this site's sidebar.
• Side PanelFLX UI · ReactSide Panel for Comment Thread.
• Animated SidebarVelora UI · ReactIcon rail that expands on hover or focus and turns into a drawer on narrow screens.
• SidebarMetal UI · React + SwiftUIAn app's side place for moving between places: sections of items with one highlight that glides to the current place…
• Ai Chat WorkspaceSpaceUI · ReactFull-featured AI Studio chat workspace template featuring conversational threads, multi-model selection, real-time…
• Aria SidebarReScript shadcn · ReScript
• SidebarOUI · ReactSidebar Trigger, Sidebar Tree, and Sidebar Button for shadcn Sidebar.
• SidebarD2Studio UI · ReactA composable, themeable and customizable sidebar component.
• Glass SidebarOpaline · ReactFloating source list with a sliding glass selection and icon-only mode.
• SidebarReactFrame · ReactA collapsible app sidebar with grouped nav sections, a sliding active-item indicator, badges, an icon-only rail mode…
• SidebarAceternity UI · React
• Sidebarark-cn · ReactA shadcn-style sidebar component built with Ark UI primitives.
• Sidebarshadcn/ui · ReactA composable, themeable and customizable sidebar component.
• Icon rail that collapsesReUI · ReactLabels give way to tooltips at 3rem, with a rail and a trigger to drive it.
• Side NavLobe UI · ReactThe SideNav component is a customizable side navigation bar. It takes in an optional avatar and top actions to be…
• sidebar-01Intent UI · Reactsidebar-01
• Animated SidebarbeUI · ReactA composable application sidebar with morphing nested navigation that folds into an animated icon rail on desktop and…
• Hook SidebarRare UI · ReactA vertical navigation list with a dashed rail that marks the active item.
• Sidebar NavbarSpectrum UI · Reactcomponent for the Sidebar Navbar
• SidebarFluid Functionalism · ReactRefined, composable app sidebar with offcanvas collapse, floating and inset variants, a mobile drawer…
• Sidebar 01 - Admin Dashboard SidebarShadcn Space · ReactA collapsible sidebar navigation with grouped menus, icons, and upgrade CTA, perfect for admin dashboards to organize…
• Agent ChatBoardUI · React
• Page Shell 02Tremor Blocks · React
• Sidebar StackbitsObsidianUI · React
• Sidebars 02Oxbow UI · Astro
• Nav MenuNexvyn UI · ReactA vertical navigation list with two-layer proximity highlight (active route + hover), weight-shift labels, and status…
• Sidebar DefaultShark UI · React
• Kinetic Lens SidebarRewamp UI · React
• Macos Sidebar BaseWatermelon UI · React
• Sidebarglasscn · React
• Sidebar HighlightUI Lab · React
• Motion DrawerCojeev UI · ReactA reference-faithful edge drawer, floating quick panel, layered workspace and bottom action tray.
• Sidebar LayoutFLX UI · ReactSidebar Layout for Settings.
• SidebarSpaceUI · ReactProvides a collapsible side navigation bar that organizes app pages into sections, supporting both desktop and mobile…
• Base SidebarReScript shadcn · ReScript
• Sidebar 01shadcn/ui · ReactA simple sidebar with navigation grouped by section.
• Documentation nav with sub-menusReUI · ReactA search field, sections that collapse and a sub-tree under the current page.
• Dashboard Console NavLobe UI · React
• sidebar-02Intent UI · Reactsidebar-02
• Bounce SidebarbeUI · ReactA vertical sidebar whose active dot jumps between destinations on a curved, spring-loaded path.
• Proximity SidebarRare UI · ReactA dash-style scroll sidebar whose items expand as the pointer approaches.
• App SidebarFluid Functionalism · ReactA complete app shell: workspace header with the peek cross-fade, search on the menu rows' rhythm with a hover-revealed…
• Topbar 05 - Sidebar Integrated TopbarShadcn Space · ReactTopbar paired with a collapsible sidebar, combining primary navigation, quick actions, notifications, and user…
• Page Shell 03Tremor Blocks · React
• Sidebar CollapsibleNexvyn UI · ReactA sidebar that folds down to its icons, with recent pages and the account at the bottom.
• Template DashboardShark UI · React
• SidebarRewamp UI · React
• Morphing Sidebar ControlsWatermelon UI · React
• Sidebar SubmenuUI Lab · React
• SidebarCojeev UI · ReactA paper folio, a readable compact index and a motion drawer. Three calm ways to keep the same workspace within reach.
• Sidebar 02shadcn/ui · ReactA sidebar with collapsible sections.
• Right-hand inspector panelReUI · ReactA floating off-canvas panel with row actions, linked counts and a status badge.
• Dashboard Filter SidebarLobe UI · React
• sidebar-03Intent UI · Reactsidebar-03
• SidebarFluid Functionalism · ReactRefined, composable app sidebar with offcanvas collapse, floating and inset variants, a mobile drawer…
• Page Shell 04Tremor Blocks · React
• Sidebar RailNexvyn UI · ReactA full width header over an icon rail that opens over the page on hover and can be kept open.
• SidebarWatermelon UI · React
• Work side panelCojeev UI · ReactA reusable work side panel composed from Cojeev base components.
• Sidebar 03shadcn/ui · ReactA sidebar with submenus.
• Filtering, loading and empty statesReUI · ReactA filter field, skeleton rows while a refresh runs, and a real empty state.
• sidebar-04Intent UI · Reactsidebar-04
• Page Shell 05Tremor Blocks · React
• Sidebar WorkspaceNexvyn UI · ReactA sectioned workspace sidebar with a workspace select, page groups and pinned settings that slides away.
• Sidebar 04shadcn/ui · ReactA floating sidebar with submenus.
• sidebar-05Intent UI · Reactsidebar-05
• Page Shell 06Tremor Blocks · React
• S
  SidebarNexvyn UI · ReactSidebar primitives: nav lists with aria-current links, icon buttons, the page area that follows the panel, and a…
• Sidebar 05shadcn/ui · ReactA sidebar with collapsible submenus.
• sidebar-06Intent UI · Reactsidebar-06
• Sidebar 06shadcn/ui · ReactA sidebar with submenus as dropdowns.
• sidebar-07Intent UI · Reactsidebar-07
• Sidebar 07shadcn/ui · ReactA sidebar that collapses to icons.
• sidebar-08Intent UI · Reactsidebar-08
• Sidebar 08shadcn/ui · ReactAn inset sidebar with secondary navigation.
• sidebar-09Intent UI · Reactsidebar-09
• Sidebar 09shadcn/ui · ReactCollapsible nested sidebars.
• sidebar-12Intent UI · Reactsidebar-12
• Sidebar 10shadcn/ui · ReactA sidebar in a popover.
• sidebar-15Intent UI · Reactsidebar-15
• Sidebar 11shadcn/ui · ReactA sidebar with a collapsible file tree.
• sidebar-16Intent UI · Reactsidebar-16
• Sidebar 12shadcn/ui · ReactA sidebar with a calendar.
• sidebar-17Intent UI · Reactsidebar-17
• Sidebar 13shadcn/ui · ReactA sidebar in a dialog.
• sidebar-18Intent UI · Reactsidebar-18

Libraries with sidebar components

• shadcn/ui
• Intent UI
• Nexvyn UI
• Tremor Blocks
• ReUI

Related categories

• React Sidebar Components
• Tailwind CSS Sidebar Components
• Animated Sidebar Components
• shadcn/ui Sidebar Components
• Navigation Components
• Menu Components
• Tabs Components
• Stepper Components
• Navbar Components
• Pagination Components
• Breadcrumb Components
• Command Palette Components
• Context Menu Components
• Mega Menu Components
• Dock Components
• Wizard Components
• Table Of Contents Components
• Tab Bar Components
• Hamburger Menu Components
• Floating Navbar Components