registry:component

Sidebar

v1.0.0ga

Responsive sidebar layout and navigation primitives.

Registry Endpoint

npx shadcn@latest add @aavya/ui-sidebar

One-time setup — add the @aavya registry to your components.json so branded dependencies resolve to Aavya (not stock shadcn):

"registries": { "@aavya": "https://registry-dev.aavya.com/r/{name}.json" }

Or install by full URL: npx shadcn@latest add https://registry-dev.aavya.com/r/ui-sidebar.json

Live Preview

Variants

variant

default · defaultoutline

size

default · defaultsmlg

Props

Part	Prop	Type	Default
SidebarProvider	defaultOpen?	boolean	true
SidebarProvider	open?	boolean	—
SidebarProvider	onOpenChange?	(open: boolean) => void	—
Sidebar	side?	'left' \| 'right'	'left'
Sidebar	variant?	'sidebar' \| 'floating' \| 'inset'	'sidebar'
Sidebar	collapsible?	'offcanvas' \| 'icon' \| 'none'	'offcanvas'
SidebarGroupLabel	asChild?	boolean	false
SidebarGroupAction	asChild?	boolean	false
SidebarMenuButton	asChild?	boolean	false
SidebarMenuButton	isActive?	boolean	false
SidebarMenuButton	tooltip?	string \| React.ComponentProps<typeof TooltipContent>	—
SidebarMenuAction	asChild?	boolean	false
SidebarMenuAction	showOnHover?	boolean	false
SidebarMenuSkeleton	showIcon?	boolean	false
SidebarMenuSubButton	asChild?	boolean	false
SidebarMenuSubButton	size?	'sm' \| 'md'	'md'
SidebarMenuSubButton	isActive?	boolean	false

Sidebar forwards remaining props to all <div> element props.

Usage Snippet

import { Sidebar } from '@/components/ui/sidebar'

export default function Example() {
  return (
    <div className="p-6">
      <Sidebar />
    </div>
  )
}

Source Preview

'use client'

import * as React from 'react'

import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'
import { PanelLeftIcon } from 'lucide-react'

import { useIsMobile } from '@/hooks/use-mobile'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet'
import { Skeleton } from '@/components/ui/skeleton'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'

const SIDEBAR_COOKIE_NAME = 'sidebar_state'
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = '16rem'
const SIDEBAR_WIDTH_MOBILE = '18rem'
const SIDEBAR_WIDTH_ICON = '3rem'
const SIDEBAR_KEYBOARD_SHORTCUT = 'b'

type SidebarContextProps = {
  state: 'expanded' | 'collapsed'
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContextProps | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)

  if (!context) {
    throw new Error('useSidebar must be used within a SidebarProvider.')
  }

  r