Sidebar
A responsive application shell with desktop collapse, mobile sheets, keyboard controls, and left or right placement.
Installation
Import from the package. Do not run shadcn add in your app.
tsx
import { SidebarProvider, Sidebar, SidebarTrigger } from "@carsxe/design-system/components/sidebar"Usage
tsx
import { Sidebar, SidebarProvider, SidebarTrigger } from "@carsxe/design-system/components/sidebar"
<SidebarProvider>
<Sidebar collapsible="icon">...</Sidebar>
<main><SidebarTrigger /></main>
</SidebarProvider>Inset sidebar
Right-to-left sidebar
API Reference
| Prop | Type | Default |
|---|---|---|
| side | "left" | "right" | "left" |
| variant | "sidebar" | "floating" | "inset" | "sidebar" |
| collapsible | "offcanvas" | "icon" | "none" | "offcanvas" |
| open / defaultOpen | boolean | — |
| onOpenChange | (open: boolean) => void | — |