<UserButton />
Renders the Solid account trigger with session-aware menu items, settings links, sign out, and plugin-contributed user menu items.
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 { LayoutDashboard, Users } from "lucide-solid"
import { UserButton } from "@/components/auth/user/user-button"
export function UserButtonLinksDemo() {
return (
<UserButton
links={[
{
label: <span>Dashboard</span>,
href: "/dashboard",
icon: <LayoutDashboard class="size-4 text-muted-foreground" />,
visibility: "authenticated"
},
{
label: <span>Team</span>,
href: "/team",
icon: <Users class="size-4 text-muted-foreground" />
}
]}
/>
)
}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.jsonAfter installation, the application owns src/components/auth/user-button.tsx and the other copied files. Point authentication and settings links to the TanStack Router paths.
Then select the plugins that add authenticated user menu items.
Props
Last updated on