<UserButton />

Usage

import { UserButton } from "@/components/auth/user/user-button"

export function UserButtonDemo() {
  return <UserButton />
}

Icon

import { UserButton } from "@/components/auth/user/user-button"

export function UserButtonIconDemo() {
  return <UserButton size="icon" />
}

Custom links

Use the links prop to add entries above the built-in items. Each entry is either a { label, href, icon?, variant?, visibility? } descriptor or a fully rendered Solid element. visibility defaults to "always" and accepts "authenticated" | "unauthenticated" | "always". Pass hideSettings to remove the built-in Settings link.

import { UserButton } from "@/components/auth/user/user-button"

export function UserButtonLinksDemo() {
  return (
    <UserButton
      links={[
        {
          label: <span>Dashboard</span>,
          href: "/dashboard",
          visibility: "authenticated"
        },
        { label: <span>Team</span>, href: "/team" }
      ]}
    />
  )
}

For interactive items shared across the app, prefer a plugin's userMenuItems slot over links.

Installation

npx shadcn@latest add https://better-auth-ui.com/r/solid/user-button.json

After install, src/components/auth/user-button.tsx and the copied user button files are app-owned. Point auth and settings links at your TanStack Router paths, then decide which plugins should contribute extra authenticated user menu items.

Props