shadcn.io is not affiliated with official shadcn/ui
Workspace Switcher Sidebar Block for Svelte
A document hub in a fixed-height window whose sidebar header opens a searchable list of eight workspaces and a Create workspace form, all drawn inside the rail, so choosing or creating swaps the rail and the page.
Installation
Overview
Move between many workspaces without leaving the page with this workspace switcher sidebar for Svelte with Ark UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar on the theme's muted tone whose header shows the current workspace's initials tile, name and plan. Pressing it opens a panel drawn inside the rail, not a floating popup: an Input to search, eight workspaces with a check on the current one, and Create workspace. Searching narrows the list with a count and an Empty line when nothing matches. Create swaps the list for a small form with a name, the address it will make and a reserved line for problems; creating adds the workspace, switches to it and closes the panel. Choosing a workspace changes the three documents in the rail and the list on the page, with a status line saying what you're in. Escape, a click or Tab outside closes the panel and returns focus to the button. Folded to icons the button is the tile, and pressing it unfolds the rail; on a phone the rail is a sheet. It's built from Sidebar, Input, Button, Empty, Avatar, Badge and Guides, with a CSS entrance only. For multi-tenant apps, agency tools and any product where one person belongs to many workspaces.
FAQ
Why is the switcher a panel in the rail and not a popover?
So it works everywhere the rail does. On a phone the sidebar is a sheet, and some libraries cannot open a floating popup from inside a sheet, so this panel is part of the rail's own markup, positioned over the links below it. It has the behavior of a popover: it opens on the button, the search field takes focus, Escape or any press or focus outside closes it, and focus goes back to the button. If your sidebar never becomes a sheet, a Popover with a Command list is a fine swap for it.
How does the search work?
The query and each workspace name go through the same fold (case and accents ignored), so the list shows exactly the workspaces that match. A line above the list counts them ("3 of 8 workspaces"), and a query that matches nothing shows a short empty state in the list's place without changing the panel's height. The status line at the foot reports the workspace you pick, not each keystroke.
What does Create workspace do?
It shows a form with a name field, the address the name makes (lowercase letters and numbers joined by dashes) and a line for problems: an empty name, a name already taken or a name with no letters or numbers. A valid name adds a Free workspace with one welcome document, switches to it, closes the panel and says so in the status line. Nothing is saved, so reloading starts over. In your app, replace createWorkspace with a call to your API and select the workspace it returns. Escape in the form goes back to the list.
What stays in the page, and how do I connect it?
Everything. The eight workspaces, their members and documents are typed at the top of the file, and the current workspace is the block's own state. The documents are links to # whose handler shows the document instead of navigating. Load the list from your session and point the links at your routes.
Is it accessible?
The header button announces whether the panel is open and which panel it controls, and its name says which workspace is current. The search field and the list are labeled, the current workspace reads "current workspace" after its plan, and the form's problem line is an alert that is read when it fills. The documents are links in a navigation landmark named after the product with the open one marked as the current page, and one polite status line reports each switch.