User Profile Popover for React

PopoverHeader holds PopoverTitle reading John Doe and PopoverDescription reading @username. Under that, a p with text-xs says Software Developer. The trigger label is @username.

The trigger is a Button with variant="ghost" and the label @username. Pressing it, or using Enter or Space, opens the panel. For a preview that opens when the pointer rests on a name, use a Hover Card. Pass the button to render on PopoverTrigger, and use PopoverContent as the panel.

The name is PopoverTitle. The handle is PopoverDescription, inside PopoverHeader. The role is a separate p with className="text-xs".

PopoverContent has no width class, so it keeps w-72. The content is the header plus the one-line role.

Escape closes the panel and returns focus to the trigger. A click outside closes it too. The panel sits beside the button, and the rest of the page stays usable.

The button and PopoverDescription both say @username. PopoverTitle says John Doe. The role line says Software Developer.