User Menu React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

User Menu is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import UserMenu from @/components/ui/user-menu.

"use client"

import { CreditCard, Settings, User } from "lucide-react"
import { useTheme } from "next-themes"
import { UserMenu, type UserMenuTheme } from "@/components/ui/user-menu"

export function AccountMenu({ onSignOut }: { onSignOut: () => Promise<void> }) {
  const { theme, setTheme } = useTheme()
  return (
    <UserMenu
      user={{ name: "Emma Carter", email: "emma.carter@northwind.com", avatar: "/avatars/emma.jpg", plan: "Pro", status: "online" }}
      theme={theme as UserMenuTheme}
      onThemeChange={setTheme}
      themeLabels={{ title: "Theme" }}
      manageHref="/settings/profile"
      manageLabel="Manage account"
      items={[
        { label: "Profile", icon: <User />, href: "/settings/profile" },
        { label: "Settings", icon: <Settings />, shortcut: "mod+,", href: "/settings" },
        { label: "Billing", icon: <CreditCard />, badge: "Pro", href: "/settings/billing" },
      ]}
      signOutLabel="Sign out"
      onSignOut={onSignOut}
    />
  )
}

Props

• userdefault "{ name: "Emma Carter", email: "emma.carter@northwind.com" }"
  UserMenuUser

  The signed-in person: { id?, name, email?, avatar?, status?: "online" | "offline" | "busy" | "away", plan?: ReactNode, role?: ReactNode }. Without a photo the avatar shows initials on a color from the name; long names truncate and keep the full name in a tooltip.

• itemsdefault "[]"
  MenuEntry[]

  Rows between the header and the accounts, in dropdown-menu's entry format: items ({ label, icon, description, shortcut, badge, href, onSelect, tone, disabled, keepOpen }), submenus, checkboxes, radio sets, groups, labels and separators. href items render through NavLink (the app's router link).

• triggerdefault "avatar"
  "avatar" | "card" | "compact" | ReactNode

  avatar: an avatar button for top bars. card: avatar, name, email and an up-down chevron filling the width, for sidebar footers; inside a collapsed sidebar (data-collapsed="true" on a group/sidebar parent) only the avatar stays. compact: avatar, first name and a chevron. Any element works too (it gets the trigger props). For custom compositions use UserMenuTrigger (see Parts).

• sizedefault "md"
  "sm" | "md"

  The trigger avatar: 32 / 40px (card 28 / 32px, compact 24 / 32px). Every size has a 44px hit area on touch.

• themedefault "system"
  "light" | "dark" | "system"

  The current theme. Pass next-themes' theme here; left out, the row starts on system and keeps its own state.

• onThemeChange
  (theme: UserMenuTheme) => void

  Shows the theme row (Light / Dark / System) and fires on every pick. Wire next-themes: const { theme, setTheme } = useTheme().

• themeLabels
  { title?: string; light?: string; dark?: string; system?: string }

  The theme row's heading and option labels; each one falls back to English: { title: "Theme", light: "Light", dark: "Dark", system: "System" }.

• accounts
  UserMenuUser[]

  Other signed-in accounts. They are listed under the current one (which gets a check), each switchable.

• onAccountChange
  (account: UserMenuUser) => (void | Promise<unknown>)

  Picking another account. Return a promise and its row spins while the menu stays open, then the menu closes.

• onAddAccount
  () => void

  Shows an Add account row under the accounts.

• addAccountLabeldefault "Add account"
  string

  The Add account row's label.

• accountsLabeldefault "Accounts"
  string

  The heading above the accounts.

• manageHrefdefault ""
  string

  Shows a Manage account button under the profile header that links here (through the router link).

• onManage
  () => void

  Shows the Manage account button and runs on press (with or without manageHref).

• manageLabeldefault "Manage account"
  string

  The Manage account button's label.

• onSignOut
  () => (void | Promise<unknown>)

  Shows the red Sign out row. Return a promise to keep the menu open with a spinner on the row until it settles; a rejection stops the spinner and leaves the menu open.

• signOutLabeldefault "Sign out"
  string

  The sign-out row's label.

• sidedefault "auto"
  "auto" | "top" | "right" | "bottom" | "left"

  Where the menu opens. auto: below the trigger, or above it for the card trigger (sidebar footers). It flips when there is no room; on phones (below 768px, with responsive off) left and right fall back to auto.

• aligndefault "auto"
  "auto" | "start" | "center" | "end"

  Alignment against the trigger. auto: end (the avatar sits at the end of a top bar), start for the card trigger.

• open
  boolean

  Controlled open state; pair it with onOpenChange.

• defaultOpendefault false
  boolean

  Starts open (uncontrolled).

• onOpenChange
  (open: boolean) => void

  Fires when the menu or the sheet opens or closes.

• responsivedefault true
  boolean

  Below 768px the menu becomes the account sheet. Off: the dropdown on every screen.

• sheetTitledefault "Account"
  string

  The phone sheet's title, read by screen readers (it is not shown).

• backLabeldefault "Back"
  string

  The back row of a submenu page in the phone sheet.

• shortcutdefault ""
  string

  A key combo in mod+k notation that opens and closes the menu from anywhere (e.g. shift+mod+u); the trigger gets aria-keyshortcuts. Empty binds nothing.

• triggerLabeldefault "(name) => "Account menu, " + name"
  (name: string) => string

  The trigger's accessible name.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for href items and the manage link. Default: the one set with LinkProvider, else a plain <a>.

• container
  HTMLElement | null

  Portal target for the menu and the sheet (default document.body).

• classNames
  Partial<Record<"trigger" | "avatar" | "name" | "email" | "chevron" | "content" | "header" | "headerAvatar" | "plan" | "manage" | "theme" | "item" | "accounts" | "addAccount" | "signOut", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the built-in trigger, merged last.

Parts

FAQ

Used in

More React navigation components