Skip to main content

More than just an avatar

<UserButton /> gives your users a familiar Google-style user menu, right in your app. All in one customizable, drop-in component.

Start building
View docs
User account

The menu users expect

<UserButton /> includes a built-in menu that links to <UserProfile/> and sign-out.

Multi-session

Switch active accounts

For users with multi-session enabled, the <UserButton /> lets them sign into multiple accounts and switch between them instantly.

Customization

Extend the menu

Customize the <UserButton /> with your own actions
and links.

Customization

Customizable to your brand

Match the look and feel of your product with full styling control. Override themes, layout, and behaviors to create an account menu that feels native to your app.

  • Theme tokens and CSS overrides
  • Dark mode support
  • Works in both server and client components
Andy Smith
Andy Smith

Andy Smith

andy@gmail.com

Manage account
Sign out
Secured by

Implement a user button in minutes

Drop-in <UserButton />

Build secure, scalable authentication in minutes with Clerk's SDKs. Drop in pre-built UI components and onboard users instantly, without friction or security concerns.

Start buildingExplore all frameworks

Get started today

Next.js
React
TanStack React Start
Expo
iOS
Android

Complete user management

Full feature set of <UserButton />

User account

  • Automatic avatar + user details
  • Direct link to <UserProfile />
  • Works with any Clerk user configuration

Multi-Session

  • Sign into multiple accounts
  • View all active sessions
  • Instant account switching
  • Session-aware UI updates

Customization & Extensibility

  • Built-in profile + sign-out actions
  • Add custom menu items
  • Add external links
  • Reorder or hide default items

Clerk API

Custom flows

Want full control over your onboarding experience? Our headless APIs give you the flexibility to build exactly what you need.

View custom flows documentation
import { useUser, useClerk } from "@clerk/react"
import { Menu } from "@base-ui/react/menu"

export default function CustomUserButton(){
  const { user } = useUser()
  const { signOutm, openUserProfile } = useClerk()
  return(
    <Menu.Root>

{" "}
      <Menu.Trigger>          

{" "}