OOratiq

Sidebar

Ready

Collapsible application sidebar.

Content area.

Installation

$ npx @oratiq-js/ui add sidebar

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import
import { useSidebar, SidebarProvider, Sidebar, SidebarTrigger, SidebarInset, SidebarHeader, /* … */ } from "@/components/ui/sidebar";

Default

Collapses to an off-canvas panel, and to a sheet on mobile.

Toggle the sidebar, or press ⌘B

Content area. The sidebar sits on the inline-start edge, so it moves to the right under RTL.

Props

PropTypeDefaultDescription
side"start" | "end""start"Logical edge — flips under RTL.
collapsible"offcanvas" | "icon" | "none""offcanvas"How the sidebar collapses.
⌘B / Ctrl+B toggles the sidebar. Below 768px it becomes a Sheet — a persistent rail would eat most of a phone screen.

View source on GitHub → components/ui/sidebar.tsx