Tailwind CSS Sidebar Components

Dev Design Library indexes 117 Tailwind CSS sidebar components from 43 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. Every library in this list styles its components with Tailwind CSS utility classes. Sidebar components belong to the Navigation group.

• Dashboard 01shadcn/ui · ReactA dashboard with sidebar, charts and data table.
• 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.
• 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…
• 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.
• 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…
• 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.
• 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.
• 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
• Sidebar 14shadcn/ui · ReactA sidebar on the right.
• sidebar-19Intent UI · Reactsidebar-19
• Sidebar 15shadcn/ui · ReactA left and right sidebar.
• Sidebar 16shadcn/ui · ReactA sidebar with a sticky site header.

Libraries with Tailwind CSS sidebar components

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

Related categories

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