# Sidebar Workspace Switcher — React Sidebar Component

> A sidebar with a workspace switcher on top whose menu springs open and rolls the new workspace into place, and a user card at the bottom with its own pop-up menu.

- Category: [Sidebars](https://pixelpapa.com/components/sidebars.md)
- Tags: sidebar, workspace, switcher, dropdown, user menu
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/sidebars/sidebar-workspace-switcher

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/sidebar-workspace-switcher
```

The file is written to `components/pixelpapa/sidebar-workspace-switcher.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/sidebars/sidebar-workspace-switcher.

## AI prompt

```text
Add the "Sidebar Workspace Switcher" component from PixelPapa UI to this project.

What it is: A sidebar with a workspace switcher on top whose menu springs open and rolls the new workspace into place, and a user card at the bottom with its own pop-up menu.
Category: Sidebars. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/sidebar-workspace-switcher
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/sidebar-workspace-switcher.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/sidebar-workspace-switcher.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/sidebar-workspace-switcher" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More sidebars

- [Sidebar Collapsible Rail](https://pixelpapa.com/components/sidebars/sidebar-collapsible-rail.md): An app sidebar that springs between a full panel and a 64px icon rail; labels fade out, and in rail mode each icon shows a tooltip on hover or focus.
- [Sidebar Floating Inset](https://pixelpapa.com/components/sidebars/sidebar-floating-inset.md): A rounded sidebar that floats inside the page margin, with a search field that filters links live (rows reflow with layout animation), count badges and a storage meter.
- [Sidebar Nested Sections](https://pixelpapa.com/components/sidebars/sidebar-nested-sections.md): A sidebar of collapsible groups with spring height animation; one active indicator bar slides between links, even across groups, along a tree guide line.