Shadcn.io is not affiliated with official shadcn/ui
Profile with Badge
A React hover card showing user profile with avatar in trigger badge for status and join date information built with shadcn/ui components
Status badges like Pro or Verified add credibility but take space in layouts. This React hover card shows small avatar and name as trigger with expanded profile revealing Pro badge and join date on hover. Built with shadcn/ui HoverCard, Avatar, and Badge with secondary variant and join date text, it's perfect for comment sections, contributor lists, or any interface displaying user-generated content where status matters but inline space is limited.
Profile with Badge preview
Installation
Related Components
Simple Profile Hover Card
Basic profile hover without badge
Profile with Follow Button
Profile with action button
Profile with Links
Profile with external links
Badge Variants
Different badge styles and colors
Avatar Component
Profile picture with fallback
User Profile Card
Full profile card layout
FAQ
Was this page helpful?
Sign in to leave feedback.
Profile with Follow Button
A React hover card showing user profile with avatar bio follower counts and follow action button built with shadcn/ui for social interactions
Profile with Location
A React hover card showing detailed user profile with location join date icons and expanded bio in wider card layout built with shadcn/ui and Lucide React