User Card
Wider user trigger that shows avatar, name, and role alongside the chevron, the canonical bottom-of-sidebar identity card. Same popover as User Menu, with menu rows supplied by the caller via an `items` prop; opens upward by default and stretches to the card width.
Open up
Open down
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/andromeda-user-cardProps
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. |
| 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. |
| avatarSize | 'sm'|'md'|'lg' | 'md' | Size of the avatar shown in the card. |
| 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 | 'User menu' | Accessible label for the trigger button and 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