Sidebar
A navigation panel contained within the preview.
Upstream documentationExamples
Loading preview…
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Sidebar
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/sidebar.json'Usage
A complete example using the installed component and hook paths.
Sidebar usage
"use client";import type { CSSProperties } from "react";import { FolderIcon, HomeIcon } from "@/lib/icons";import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "@/components/ui/sidebar";function SidebarPreview() { return ( <SidebarProvider className="min-h-0 justify-center" style={{ "--sidebar-width": "14rem" } as CSSProperties} > <Sidebar collapsible="none" className="rounded-lg border"> <SidebarContent> <SidebarGroup> <SidebarGroupLabel>Workshop</SidebarGroupLabel> <SidebarMenu> <SidebarMenuItem> <SidebarMenuButton render={<a href="/">Theme workshop</a>}> <HomeIcon /> <span>Theme workshop</span> </SidebarMenuButton> </SidebarMenuItem> <SidebarMenuItem> <SidebarMenuButton isActive render={<a href="/docs">Components</a>}> <FolderIcon /> <span>Components</span> </SidebarMenuButton> </SidebarMenuItem> </SidebarMenu> </SidebarGroup> </SidebarContent> </Sidebar> </SidebarProvider> );}export default function Demo() { return <SidebarPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Sidebar
Sidebar props
React.ComponentProps<"div"> & { side?: "left" | "right"; variant?: "sidebar" | "floating" | "inset"; collapsible?: "offcanvas" | "icon" | "none";}- side
- "left"
- variant
- "sidebar"
- collapsible
- "offcanvas"
SidebarContent
SidebarContent props
React.ComponentProps<"div">SidebarFooter
SidebarFooter props
React.ComponentProps<"div">SidebarGroup
SidebarGroup props
React.ComponentProps<"div">SidebarGroupAction
SidebarGroupAction props
useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & { sound?: boolean }- sound
- true
SidebarGroupContent
SidebarGroupContent props
React.ComponentProps<"div">SidebarGroupLabel
SidebarGroupLabel props
useRender.ComponentProps<"div"> & React.ComponentProps<"div">SidebarHeader
SidebarHeader props
React.ComponentProps<"div">SidebarInput
SidebarInput props
React.ComponentProps<typeof Input>SidebarInset
SidebarInset props
React.ComponentProps<"main">SidebarMenu
SidebarMenu props
React.ComponentProps<"ul">SidebarMenuAction
SidebarMenuAction props
useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & { showOnHover?: boolean; } & { sound?: boolean }- showOnHover
- false
- sound
- true
SidebarMenuBadge
SidebarMenuBadge props
React.ComponentProps<"div">SidebarMenuButton
SidebarMenuButton props
useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & { isActive?: boolean; tooltip?: string | React.ComponentProps<typeof TooltipContent>; } & VariantProps<typeof sidebarMenuButtonVariants> & { sound?: boolean }- isActive
- false
- variant
- "default"
- size
- "default"
- sound
- true
SidebarMenuItem
SidebarMenuItem props
React.ComponentProps<"li">SidebarMenuSkeleton
SidebarMenuSkeleton props
React.ComponentProps<"div"> & { showIcon?: boolean;}- showIcon
- false
SidebarMenuSub
SidebarMenuSub props
React.ComponentProps<"ul">SidebarMenuSubButton
SidebarMenuSubButton props
useRender.ComponentProps<"a"> & React.ComponentProps<"a"> & { size?: "sm" | "md"; isActive?: boolean; } & { sound?: boolean }- size
- "md"
- isActive
- false
- sound
- true
SidebarMenuSubItem
SidebarMenuSubItem props
React.ComponentProps<"li">SidebarProvider
SidebarProvider props
React.ComponentProps<"div"> & { defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void;}- defaultOpen
- true
SidebarRail
SidebarRail props
React.ComponentProps<"button"> & { sound?: boolean }- sound
- true
SidebarSeparator
SidebarSeparator props
React.ComponentProps<typeof Separator>SidebarTrigger
SidebarTrigger props
React.ComponentProps<typeof Button>useSidebar
Re-exported primitive; see the upstream API reference.