Search nx-ui

Jump to any foundation, component, block or example.

User Menu

An account menu with an online avatar card, searchable organisation switching, theme choices and sign-out — shown in the app shell footer.

$bunx shadcn@latest add @nx-ui/user-menu
Registry item
Installs withavatardropdown-menuorg-switchertheme-toggleutils

Assurance profile menu

The nx account menu: profile, settings, API and billing, followed by organisation switching, appearance and sign-out. Actions in this demo report their result below.

Choose an action to try this example.

Compact header

The same account menu with an avatar trigger and downward placement for app headers.

Choose an action to try this example.

Basic usage

A compact account card trigger that opens a header, a theme toggle, and a sign-out action.

Custom menu items

Pass DropdownMenuItems (and separators) as children to add profile, organisation and billing links above the theme toggle.

Many organisations

Browse 17 organisations with your current one first, or search by name and role. Switch organisation, or try creating one in this local example. My account opens the matching account portal.

Active organisation: Nexus ReGen

Create the first organisation

The create action remains available when the user has no organisations yet.

Active organisation:

Secondary label

Override the trigger's second line — useful for showing a role or organisation instead of the email.

Without sign-out

Omit onSignOut to hide the sign-out row entirely — useful for read-only or kiosk contexts where the menu only exposes the theme toggle.

In a sidebar composition

A realistic placement: pinned to the foot of a narrow app-shell sidebar, above the fold.

API reference

Exported parts and their props, extracted from the component source.