New

AccountSwitcher

Multi-account dropdown with avatar, name, email, active indicator, and "Add account" button.

Auth & Onboardingaccountswitcherdropdownmulti-accountavatar

Dependencies

shadcn/ui components needed:

npx shadcn@latest add lucide-react

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { useState } from "react";
4import { Check, ChevronDown, Plus, LogOut, Settings } from "lucide-react";
5
6const accounts = [
7  { id: "1", name: "Alex Johnson", email: "alex@personal.com", initials: "AJ", color: "bg-violet-500" },
8  { id: "2", name: "Alex J. (Work)", email: "alex@acmecorp.com", initials: "AJ", color: "bg-blue-500" },
9  { id: "3", name: "Side Project", email: "alex@sideproject.io", initials: "SP", color: "bg-emerald-500" },
10];
11
12export default function AccountSwitcher() {
13  const [activeId, setActiveId] = useState("1");
14  const [open, setOpen] = useState(true);
15  const active = accounts.find((a) => a.id === activeId) ?? accounts[0];
16
17  return (
18    <div className="mx-auto w-full max-w-xs">
19      <button onClick={() => setOpen(!open)} className="flex w-full items-center gap-3 rounded-xl border border-zinc-200 bg-white p-3 shadow-sm transition-all hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-900">
20        <div className={`flex h-9 w-9 items-center justify-center rounded-full text-xs font-bold text-white ${active.color}`}>{active.initials}</div>
21        <div className="flex-1 text-left min-w-0">
22          <p className="truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100">{active.name}</p>
23          <p className="truncate text-xs text-zinc-500 dark:text-zinc-400">{active.email}</p>
24        </div>
25        <ChevronDown className={`h-4 w-4 text-zinc-400 transition-transform ${open ? "rotate-180" : ""}`} />
26      </button>
27
28      {open && (
29        <div className="mt-2 overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-lg dark:border-zinc-800 dark:bg-zinc-950">
30          <div className="p-1.5">
31            {accounts.map((account) => (
32              <button
33                key={account.id}
34                onClick={() => { setActiveId(account.id); setOpen(false); }}
35                className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 transition-colors ${account.id === activeId ? "bg-violet-50 dark:bg-violet-900/20" : "hover:bg-zinc-50 dark:hover:bg-zinc-900"}`}
36              >
37                <div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold text-white ${account.color}`}>{account.initials}</div>
38                <div className="flex-1 text-left min-w-0">
39                  <p className="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">{account.name}</p>
40                  <p className="truncate text-xs text-zinc-500 dark:text-zinc-400">{account.email}</p>
41                </div>
42                {account.id === activeId && <Check className="h-4 w-4 shrink-0 text-violet-600 dark:text-violet-400" />}
43              </button>
44            ))}
45          </div>
46          <div className="border-t border-zinc-100 p-1.5 dark:border-zinc-800">
47            <button className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-zinc-600 transition-colors hover:bg-zinc-50 dark:text-zinc-400 dark:hover:bg-zinc-900">
48              <Plus className="h-4 w-4" /> Add account
49            </button>
50            <button className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-zinc-600 transition-colors hover:bg-zinc-50 dark:text-zinc-400 dark:hover:bg-zinc-900">
51              <Settings className="h-4 w-4" /> Manage accounts
52            </button>
53            <button className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/10">
54              <LogOut className="h-4 w-4" /> Sign out
55            </button>
56          </div>
57        </div>
58      )}
59    </div>
60  );
61}