Collapsible sidebar and navigation components for React
Navigation for app shells rather than marketing sites. A collapsible sidebar that keeps its state, a file tree for nested structures, a macOS style dock, and the browser and laptop frames people use to present a product. All dark first and installable with the shadcn CLI.
6 components, installable with the shadcn CLI.
Sidebar
The collapsible accordion sidebar this whole library runs on.
View componentFile Tree
A bundle read as a tree. Folders fold open, one highlight glides between rows, sizes on the right.
View componentmacOS Dock
A magnifying macOS dock with springy icons and a ⌘K menu.
View componentAccordion
Accordion rows that each open to a body, a checklist, and a visual.
View componentBrowser Window
A Chrome/Safari window frame for screenshots and embeds. Narrow it past 480px and it becomes a phone browser.
View componentMacBook Frame
A front-facing MacBook mockup. Drop a screenshot or live UI on the screen.
View component
Questions
- Does the sidebar collapse and remember its state?
- Yes. It collapses to icons, expands back, and the choice persists between visits so the layout does not reset on every load.
- Does it work on mobile?
- Yes. On small screens the sidebar becomes a drawer, so the same navigation works without a separate mobile component.
Browse by type
Install one in a minute
Every component here installs with the shadcn CLI and lands in your project as source you own.
Read the install guide