Shadcn.io is not affiliated with official shadcn/ui
Event Preview
A React hover card showing event details with Calendar, Clock, Users icons, Upcoming badge, and structured date, time, and attendee information
Calendar events need context—this React hover card displays meeting details with title, description, Upcoming badge, and structured date/time/attendees using Calendar, Clock, Users icons from Lucide React. Built with shadcn/ui HoverCard, Badge, and Radix UI primitives featuring w-80 content, space-y-3 sections, flex items-center gap-2 icon rows, text-muted-foreground styling, and asChild button trigger. The structured event preview with visual icons creates informed scheduling—perfect for calendar interfaces, meeting lists, event dashboards, or anywhere users browse events needing complete details before joining showing who, when, and how long.
Event Preview preview
Installation
Related Components
Link Preview
Preview with formatted metadata
Info with Title
Structured hover card with heading
Standard Badge
Status badge component
Document Preview
File details with icon sections
Standard Calendar
Calendar date picker component
List Item
Event list item with details
FAQ
Was this page helpful?
Sign in to leave feedback.
Image Preview
A React hover card displaying actual image thumbnail with filename, dimensions, size, and format on button trigger using shadcn/ui HoverCard
Product Preview
A React hover card displaying product preview with Package icon, pricing with original and sale prices, description, rating, and stock status