User menu

Free

A dropdown for the signed-in person's identity and account actions.

Installs components/ui/user-menu.tsxDepends on @radix-ui/react-dropdown-menu, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/user-menu.json

When to use #

Use it for

Account switching, settings and sign out in a header.
You control the content; it implies no session behaviour.

Skip it when

General actions that are not about the person; use a dropdown menu.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/user-menu.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { Avatar } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from "@/components/ui/dropdown-menu"
import { UserMenu } from "@/components/ui/user-menu"

export function AccountMenu() {
  return (
    <UserMenu trigger={<Button variant="ghost" size="icon" aria-label="Account"><Avatar name="Mara Chen" /></Button>}>
      <DropdownMenuLabel>mara@example.com</DropdownMenuLabel>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem>Sign out</DropdownMenuItem>
    </UserMenu>
  );
}

API reference #

UserMenu

component

Also accepts the native props of its root element and a ref.

PropTypeDefault

trigger *ReactElement<unknown, string | JSXElementConstructor<any>>—

contentProps(DropdownMenuContentProps & RefAttributes<HTMLDivElement>)—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.