Back to blocks
npx shadcn@latest add https://ui.doras.to/r/sidebar.json

API Reference

Root

Contains all root functionality.

PropTypeDefault
id*string-
side"left" | "right""left"
variant"default" | "floating""default"
collapsiblebooleantrue
defaultOpenbooleantrue
widthstring"16rem"
collapsedWidthstring"3.5rem"
keyboardShortcutstring-
classNamestring-
rootClassNamestring-
isCollapsedboolean-

Examples

Right Sidebar

A sidebar positioned on the right side of the screen.

Multiple sidebars

Modify and manage multiple sidebars without layout or overflow problems. Pass classNames to style individually including setting widths and heights, and manage what appears on one sidebar depending on the other easily