Profile Dropdown

The account menu behind your avatar, with status, theme and a hold to sign out.

FreeWeb and MobileMotion

npx shadcn add @fetaui/profile-dropdown

Playground

Open

Do not disturb

Icons animation

Motion

Installation

Terminal· bash

1 npx shadcn add @fetaui/profile-dropdown

The trigger is a button with aria-haspopup and aria-expanded, and the panel is a labelled dialog.
Rows are menu items. Status and theme are radio groups. Accounts are menu item radios, with the current one checked.
Holding announces Keep holding, and finishing announces Signed out.

The menu grows from the trigger in 180 ms: opacity, scale 0.96 and 4 px of rise.
Status and theme slide their thumb on a spring, and the paused note grows in for Do not disturb.
Sign out fills over 1.2 s and drains in 300 ms if released early.
Switch account slides in from 24 px over 240 ms while the menu slides 24 px out.
With reduced motion the menu fades and panels swap, but the fill still grows because it carries meaning.

260 wide trigger and 280 wide menu on Web. 358 wide on Mobile, with 46 px rows, 36 px segments and a 44 px Sign out row. Shortcuts hide on Mobile.

The panel mounts only while open.
The hold fill is one motion value driving a clip path, so holding re-renders nothing per frame, and it stops on unmount.

Give your coding assistant the Markdown reference instead of screenshots.

Import ProfileDropdown from @/components/fetaui/profile-dropdown after installing it. account is required, with id, name, email and initials.
accounts lists everyone else. Wire onSwitchAccount, onAddAccount, onProfile, onSettings and onBilling.
onSignOut fires only after the 1.2 s hold completes, so it needs no second confirm.
onThemeChange only reports the pick, so apply the theme yourself. The demo wires none of these. Composes Menu, ToggleGroup, Avatar and IconButton.