Multi-Account Switcher Dropdown Menu for React

Q: What does the closed button show?

An outline Button, w-64 with h-auto so two lines fit, holding a size-6 Avatar, Personal Account over m@example.com, and an up-down chevron at the end.

Q: How wide is the menu compared with the button?

Both are w-64, and the menu lines up with the button's start edge, so they match. DropdownMenuContent's align defaults to start.

Q: What if the personal photo is missing?

AvatarFallback shows CN instead. Acme Corp and Startup Inc have no image at all, so they always show AC and ST.

An account switcher whose button shows the current account, with every account and its email in the menu and Add Account at the end.

The button shows Personal Account, its email, and a chevron. The menu lists that account with a check, plus Acme Corp and Startup Inc with their emails, then Add Account.

Use it when someone works in more than one account and the current name should stay visible. Adding an account is a separate step. Open it in a Dialog. In React, Base UI does not switch the session.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

<DropdownMenu>
  <DropdownMenuTrigger
    render={
      <Button
        className="h-auto w-64 justify-between py-2"
        variant="outline"
      />
    }
  >
    <span className="flex items-center gap-2">
      <Avatar className="size-6">
        <AvatarImage alt="@shadcn" src="https://github.com/shadcn.png" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <span className="flex flex-col items-start">
        <span className="font-medium text-sm">Personal Account</span>
        <span className="text-muted-foreground text-xs">m@example.com</span>
      </span>
    </span>
    <ChevronsUpDownIcon
      aria-hidden="true"
      className="opacity-50"
      data-icon="inline-end"
    />
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-64">
    <DropdownMenuGroup>
      <DropdownMenuLabel>Accounts</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem>
        <Avatar>
{/* The rest of the file is under Installation. */}

FAQ

What does the closed button show?

An outline Button, w-64 with h-auto so two lines fit, holding a size-6 Avatar, Personal Account over m@example.com, and an up-down chevron at the end.

How wide is the menu compared with the button?

Both are w-64, and the menu lines up with the button's start edge, so they match. DropdownMenuContent's align defaults to start.

What accounts are listed?

Under an Accounts label and a separator: Personal Account (m@example.com), Acme Corp (team@acme.com) and Startup Inc (hello@startup.io). Each row is a DropdownMenuItem with an avatar and two lines of text. Add Account follows the last separator.

How is the current account marked?

A check icon at the end of the Personal Account row, pushed there with ms-auto. The demo hardcodes it; render it on whichever account is active, and say so in text too, since the icon is aria-hidden.