Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Hover Card
- Input
- Input OTP
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
Application
Platform
Toggle the sidebar
"use client";
import {
CalendarIcon,
HomeIcon,
InboxIcon,Installation
$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/sidebar.json
Usage
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
SidebarTrigger,
} from "@/components/ui/sidebar/sidebar";<SidebarProvider>
<Sidebar>
<SidebarHeader />
<SidebarContent>
<SidebarGroup />
</SidebarContent>
</Sidebar>
<main>
<SidebarTrigger />
</main>
</SidebarProvider>Composition
Use the following composition to build a Sidebar:
SidebarProvider
├── Sidebar
│ ├── SidebarHeader
│ ├── SidebarContent
│ │ └── SidebarGroup
│ │ ├── SidebarGroupLabel
│ │ └── SidebarGroupContent
│ │ └── SidebarMenu
│ │ └── SidebarMenuItem
│ │ └── SidebarMenuButton
│ └── SidebarFooter
└── SidebarInset
└── SidebarTriggerRTL
To enable right-to-left support, see the RTL guide.
التطبيق
المنصة
بدّل الشريط الجانبي
"use client";
import {
CalendarIcon,
HomeIcon,
InboxIcon,API Reference
SidebarProvider
Provides the sidebar context and handles the open/collapsed state. Wrap your layout with it.
| Prop | Type | Default |
|---|---|---|
defaultOpen | boolean | true |
open | boolean | - |
onOpenChange | (open: boolean) => void | - |
Sidebar
The main sidebar container.
| Prop | Type | Default |
|---|---|---|
side | "left" | "right" | "left" |
variant | "sidebar" | "floating" | "inset" | "sidebar" |
collapsible | "offcanvas" | "icon" | "none" | "offcanvas" |
useSidebar
A hook to read and control the sidebar state. Must be used within a SidebarProvider.
const { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar } =
useSidebar();The sidebar is composed of many parts — SidebarHeader, SidebarFooter, SidebarContent, SidebarGroup, SidebarMenu, SidebarMenuItem, SidebarMenuButton, and more. Each accepts a className and the props of its underlying element.