User Button

A user button dropdown component that shows user information and provides quick access to profile settings and sign out.

Demo Mode: This component requires authentication context. The demo below uses mock user data (John Doe) to showcase the dropdown functionality.

Live Demo

Your Application Header

Click the user button to see the dropdown menu

Basic Usage

Header.tsx

Features

👤 User Avatar

Shows user avatar or initials from session

📧 User Info

Displays name and email in dropdown

⚙️ Profile Link

Quick access to profile settings

🚪 Sign Out

One-click sign out functionality

Customization

Automatic Features

Props

The ProfileDropdown component requires no props and works automatically with NextAuth session.

Requirements:

  • NextAuth.js configured in your app
  • Active user session
  • SessionProvider wrapping your app