Account Switcher Blueprint
Static open-state blueprint of an account switcher panel listing three accounts with the current one checked and an add-account row.
Static open-state blueprint of an account switcher panel listing three accounts with the current one checked and an add-account row.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Account Switcher Blueprint renders the open state of an account switcher as static plain markup, never a Radix Popover or DropdownMenu. Three accounts are listed in an inline panel: Avery Stone (personal), Acme Inc. (current workspace, checked with a Check icon), and Acme Labs. A fourth row offers Add account with a Plus icon in a bordered circle. The trigger button sits above the panel so reviewers see both states at once without any interaction.
Accounts are a typed const array with a current flag driving the check mark and the muted highlight row. The blueprint pattern is essential for screenshots and the block preview iframe where Radix portals escape the render root.
Reach for this block when you need to preview or document the account switcher open state in a design review or registry screenshot. Wire the real interaction to a closed DropdownMenu trigger in your app shell and reference this blueprint for the panel layout and aria-current handling.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the multi-workspace switcher panel. Other switcher blueprints:
Tip: render the trigger button above the panel so both the closed and open states read together in one glance, the preview tells the full story.