User Card
Opens the account menu from a row that names the signed-in user and their role.
Configurations
4 examplesClosed
sm
md
Open up
Open down
No role
sm
md
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| namereq | string | - | Shown as the card's primary label and used for the avatar initials. |
| role | string | - | Subtitle under the name (e.g. "Flight Director"). |
| src | string | - | Optional avatar image URL; falls back to initials when absent. |
| lightSrc | string | - | Optional light-theme version of `src`; passed to Avatar, which shows `src` in dark and `lightSrc` in light. |
| status | 'online'|'caution'|'fault'|'offline' | - | Presence status shown as a dot on the avatar. Passed verbatim to Avatar, whose enum this is; any other value renders no dot. |
| size | 'sm'|'md' | 'md' | Scales the card: avatar (30/36), inset, gap, and name/role type. No lg rung — a sidebar rail never has the room for one. The popover rows follow the same rung (capped to UserMenuPanel's own sm/md/lg ladder). Replaces the older `avatarSize` prop, which scaled only the avatar; a copy still passing `avatarSize` renders md. |
| itemsreq | UserMenuItem[] | - | Entries rendered in the popover menu. |
| placement | 'top'|'bottom' | 'top' | Which side of the card the menu opens toward. |
| align | 'start'|'end'|'stretch' | 'stretch' | How the panel aligns to the card; stretch matches its width. |
| defaultOpen | boolean | false | Render the menu pre-opened (showcases / docs). Outside-click and Escape still dismiss it. |
| staticOpen | boolean | false | Render pre-opened AND pinned; outside-click / Escape do not dismiss it. For showcases / docs where several popovers are shown open at once and one must not close the others. |
| ariaLabel | string | - | Accessible label for the trigger button and menu. Omitted, the trigger is named by its visible name and role, and the menu is labelled 'User menu'. |
| className | string | - | Extra class names for the card's root element. |
| style | React.CSSProperties | - | Inline styles merged onto the card's root element. |
AI Canvas