shadcn.io is not affiliated with official shadcn/ui
Team Switcher Sidebar Block for Svelte
A team workspace in a fixed-height window whose sidebar header is a menu of three teams with plan words and Ctrl or Command with 1, 2, 3 hints; choosing one swaps the project list, the counts and the page.
Installation
Overview
Let people move between the teams they belong to with this team switcher sidebar for Svelte with Ark UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar whose header is a menu button showing the current team's initials tile, its name and its plan. It opens a Dropdown Menu of three teams, each with its plan word, a check on the current one and a Kbd hint, Ctrl or Command with 1, 2 or 3, that works while focus is inside the window. Choosing a team changes everything that belongs to it: the three projects in the rail and the open-milestone count beside each, the lockup in the header, and the page, which lists the chosen project's milestones with a state glyph, a word (Done, In progress or Not started) and a due date. A status line says which team you're in and how much is open. Folded to icons the lockup is the tile with a tooltip, and on a phone the sidebar is a sheet. It's built from Sidebar, Dropdown Menu, Kbd, Avatar, Badge and Guides, with a CSS entrance only. For team and workspace apps, agency tools and any product where one account has several teams.
FAQ
What changes when I switch team?
Everything that belongs to the team. Each team in TEAMS has its own projects, and each project its milestones, so the rail shows that team's three projects with their counts, the header shows its tile, name and plan, the top bar and the page show its first project, and the status line says "Tidewell Labs (Team plan): 3 projects, 6 open milestones." The counts are worked out from the milestones, never typed twice.
How do the keyboard shortcuts work?
Ctrl with 1, 2 or 3 (Command on Apple devices) switches to the first, second or third team, but only while focus is inside the window: a capture listener sits on the window's element, so the page it lives on keeps its own keys. The caps read Ctrl or the Command sign, swapped in after the page loads. The same hints show in the menu beside each team. Browsers reserve some of these chords for their own tabs, so in your app you may prefer other keys.
What stays in the page, and how do I connect it?
Everything. The teams, projects and milestones are typed at the top of the file, and the chosen team is the block's own state; nothing is saved or fetched. Replace pickTeam with a call that loads the team from your API and keep the rest: swap the list, the header and the page together. The projects are links to # whose handler shows the project instead of navigating.
What happens when the sidebar collapses or on a phone?
Folded to icons the header is the team's tile with a tooltip reading "Alder Row Studio, switch team", and the menu opens from it as before. Below the medium breakpoint the sidebar is a sheet opened by the menu button in the top bar; picking a team keeps it open so you can see the new projects, and choosing a project closes it. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
Is it accessible?
The header button says which team is current and that it switches team. The menu is a real menu: arrow keys move, Enter picks, Escape closes it and focus returns to the button, and the current team reads "current team" after its plan. The projects are links in a navigation landmark named after the product, each named with its open milestones, the open one marked as the current page. Milestone states are a glyph and a word, never a color, and one polite status line reports each switch.