User Button
A dropdown menu component that displays the current user's avatar, name, email, and plan. Provides quick access to settings, billing, and sign out actions.
Usage
import { UserButton } from "@/components/ui/user-button"
export default function Page() {
return (
<UserButton />
)
}Behavior
| State | Display |
|---|---|
| User is on a paid plan | Shows Billing item to manage subscription via Stripe portal. |
| User is on the free plan | Shows Upgrade Plan item that redirects to the pricing page. |
| User has a name | Displays the name in the dropdown label. |
| User has no name | Falls back to displaying the email address. |
Menu Items
| Item | Description |
|---|---|
Settings | Navigates to the settings page. |
Billing | Opens the Stripe customer portal. Only visible for paid plan users. |
Upgrade Plan | Redirects to the pricing page. Only visible for free plan users. |
Logout | Signs out the current user and redirects to /sign-in. |
The user-button.tsx file already comes in the EasyToLaunch repo by default.