Overview
A functional user button using useUser() and useClerk() hooks. Shows the signed-in user's avatar with a dropdown for profile, settings, and sign-out.
Installation
npx shadcn@latest add "https://elements.crfrst.dev/r/clerk-user-button"Usage
import { ClerkUserButton } from "@/components/elements/clerk-user-button";
export function Header() {
return <ClerkUserButton />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Custom CSS classes |
menuItems | { label: string; onClick: () => void }[] | - | Additional menu items |
Features
- Avatar with initials fallback
- Data from
useUser()(name, email, image) - Sign out via
useClerk().signOut() - Loading skeleton while session loads
- Click-outside-to-close behavior
- Custom menu items support