Components / Navigation
Sidebar
Collapsible application sidebar with mobile drawer support.
Preview
1import { Home, Settings } from "lucide-react"2import { Sidebar } from "@/components/ui/sidebar"3
4export function SidebarDemo() {5 return <Sidebar activeId="home" items={[{ id: "home", label: "Overview", icon: <Home /> }, { id: "settings", label: "Settings", icon: <Settings /> }]} />6}collapsed
The collapsed style of this component.
1import { Home, Settings } from "lucide-react"2import { Sidebar } from "@/components/ui/sidebar"3
4export function SidebarDemo() {5 return <Sidebar activeId="home" items={[{ id: "home", label: "Overview", icon: <Home /> }, { id: "settings", label: "Settings", icon: <Settings /> }]} />6}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/sidebarUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.