Ctrl K
Browse documentation

docs / components/user-button

UserButton

Give signed-in users a compact account menu and sign-out action.

Basic usage

account-menu.tsx
import { UserButton } from "@vulyo/nextjs";export function AccountMenu() {  return (    <UserButton      showName      afterSignOutUrl="/"      userProfileMode="modal"    />  );}

Profile modes

Use modal to open UserProfile in a dialog. Use path when account management has its own route; userProfileUrl is required in path mode.

account-menu.tsx
<UserButton  userProfileMode="path"  userProfileUrl="/account"  afterSignOutUrl="/sign-in"/>

Properties

PropertyDescription
showNameShow the display name or email beside the avatar.
afterSignOutUrlDestination after the current session is revoked.
userProfileModeOpen account management in a modal or at a path.
userProfileUrlRequired destination when userProfileMode is path.
appearanceOverrides the provider-level appearance.