Navigation & disclosure@neumorphism-ui/sidebar

Sidebar

SidebarProvider owns desktop and mobile state plus the Ctrl/Cmd+B shortcut. Desktop can collapse off-canvas or to icon width, while mobile reuses the existing Sheet. Menus, tooltips, and focus states stay on the existing neumorphic token system.

@neumorphism-ui/sidebar

Registry JSON

Preview

Overview

Review the most important information for the current project.

Installation

npx shadcn@latest add @neumorphism-ui/sidebar

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

"use client";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuLink,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";

Example

export default function Example() {
  return <SidebarProvider className="min-h-80">
    <Sidebar collapsible="icon">
      <SidebarHeader><strong>Workspace</strong></SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem><SidebarMenuLink href="#overview" isActive tooltip="Overview"><span aria-hidden="true">⌂</span><span>Overview</span></SidebarMenuLink></SidebarMenuItem>
              <SidebarMenuItem><SidebarMenuLink href="#settings" tooltip="Settings"><span aria-hidden="true">⚙</span><span>Settings</span></SidebarMenuLink></SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
    <SidebarInset><header className="p-3"><SidebarTrigger /></header><section id="overview" className="p-4">Workspace overview</section></SidebarInset>
  </SidebarProvider>;
}

API Reference

Component	Prop	Type	Default	Description
`SidebarProvider`	`defaultOpen / open / onOpenChange`	`boolean / controlled state`	`—`	Controls the initial or controlled desktop open state.
`Sidebar`	`collapsible`	`"offcanvas" \| "icon" \| "none"`	`"offcanvas"`	Chooses whether a collapsed sidebar disappears or remains at icon width.
`Sidebar`	`side / variant`	`"left" \| "right" / "sidebar" \| "floating" \| "inset"`	`—`	Chooses the side and surface presentation.
`SidebarTrigger`	`label`	`string`	`"Toggle sidebar"`	Localizes the accessible name of the collapse toggle.
`SidebarMenuButton / SidebarMenuLink`	`isActive / tooltip`	`boolean / string`	`—`	Marks the active destination and provides a tooltip when icon-collapsed.