Shadcn Sidebar Workspace Switcher

Application shell with a workspace switcher. Built by composing Avatar, Breadcrumb, Button, Card, Dropdown Menu and 1 more. Uses cn alongside the shadcn primitives. A free, open source shadcn sidebar example you can install with npx shadcn@latest add @reui/c-sidebar-1 and edit as your own code.

Grouped navigation with count badges, row menus and a footer account menu.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: An inset variant layout whose header dropdown switches the workspace named in the page breadcrumb, beside stat cards and a deploy list

When to use

The persistent navigation column of an app, which can narrow to an icon rail or slide off screen
Documentation trees with collapsible sections and sub-pages, or project lists narrowed by a search field
A right side inspector that shows the details of the record open beside it

When not to use

A nav that narrows to a column of icons with hover names when collapsed: use the Sidebar Icon Rail example
A complete multi page product layout with header, nav and content area already built: use the App Shell blocks
Account settings pages that switch between personal details, billing and team panels: use the Profile blocks
A shop catalog facet panel with price range, brand counts, color swatches and sizes: use the Filter Sidebar blocks

Agent notes

Replace WORKSPACES, NAV, PROJECTS, DEPLOYMENTS and STATS with your data; the active Deployments row is hard coded through isActive
New workspace, the New project SidebarGroupAction and every project row and account DropdownMenuItem have no handler yet
Menu links are anchors passed through render on the base twin and asChild on radix; point each # href at your route
SidebarProvider listens for Cmd or Ctrl+B on the whole window, so pressing it in a text editor on the page toggles its open state too

Markdownhttps://web.dev.reui.io/components/sidebar/c-sidebar-1.md

MCPget_example("c-sidebar-1")

Installnpx shadcn@latest add @reui/c-sidebar-1

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Sidebar Workspace Switcher

Dependencies

About Shadcn Sidebar Workspace Switcher

What You Can Build With Shadcn Sidebar Workspace Switcher

Composes Avatar, Breadcrumb, Button, Card, Dropdown Menu, Sidebar, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-sidebar-1
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Sidebar Examples

Icon Rail Icon rail that collapses
Docs Navigation Documentation nav with sub-menus
Inspector Panel Right-hand inspector panel
Filter & Loading Filtering, loading and empty states

Related Shadcn Component Categories

Signature Pad
Open-source shadcn signature pad components for e-signature forms, agreements, and proof of delivery.
Skeleton
Open-source shadcn skeleton components for loading placeholders, perceived performance, and content previews.
Slider
Open-source shadcn slider components for range filters, pricing controls, and media settings.
Sonner
Open-source shadcn Sonner toast components for success feedback, error states, and non-blocking updates.
Sortable
Open-source shadcn sortable components for drag-and-drop lists, priority ranking, and reordering rows.
Spinner
Open-source shadcn spinner components for loading indicators, async actions, and button states.

Frequently Asked Questions

When should I use Shadcn Sidebar Workspace Switcher?

Use it for an inset variant layout whose header dropdown switches the workspace named in the page breadcrumb, beside stat cards and a deploy list.

Shadcn Sidebar as a whole fits:

The persistent navigation column of an app, which can narrow to an icon rail or slide off screen
Documentation trees with collapsible sections and sub-pages, or project lists narrowed by a search field
A right side inspector that shows the details of the record open beside it

For a nav that narrows to a column of icons with hover names when collapsed, use the Sidebar Icon Rail example. For a complete multi page product layout with header, nav and content area already built, use the App Shell blocks. For account settings pages that switch between personal details, billing and team panels, use the Profile blocks. For a shop catalog facet panel with price range, brand counts, color swatches and sizes, use the Filter Sidebar blocks.

How do I install Shadcn Sidebar Workspace Switcher?

Run npx shadcn@latest add @reui/c-sidebar-1. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Sidebar Workspace Switcher free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Sidebar Workspace Switcher use?

It composes Avatar, Breadcrumb, Button, Card, Dropdown Menu, Sidebar. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.