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
A collapsible sidebar navigation for SaaS admin panels and trading dashboards, with accordion sections, an active rail and a mobile drawer.
View componentFile Tree
A file tree for code bundles, data exports and research folders, with folding folders, keyboard navigation and sizes on the right.
View componentmacOS Dock
A macOS style app dock with magnifying icons and a ⌘K command menu, for launchers and workspace switchers in trading and AI tools.
View componentAccordion
An accordion for feature and FAQ sections on product pages, each row opening to a body, a checklist and a screenshot.
View componentBrowser Window
A browser window mockup for showing a dashboard or web app on a landing page, in Chrome or Safari frames, with a phone layout under 480px.
View componentMacBook Frame
A MacBook mockup frame for product screenshots and live app embeds on landing pages, pitch decks and fintech case studies.
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