Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Bottom Drawer Event Details
A bottom drawer displaying rich event details with Badge tags, Lucide icons for date, location, and attendees in mobile sheet format
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Event details need visual hierarchy—icons and badges organize information clearly on mobile. This React bottom drawer combines shadcn/ui components featuring Calendar, MapPin, and Users icons from Lucide React with Badge variants showing event type and format. Built with Drawer, space-y-4 layout, and icon-text pairs creating scannable mobile content. The event details pattern improves information density—perfect for ticket apps, calendar views, venue finders, or anywhere mobile users need rich event context without overwhelming small screens.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Bottom Drawer
Basic drawer structure
Bottom Drawer Form
Input form in drawer
Standard Badge
Tag and label component
Card Component
Event card layout
Scrollable Drawer
Long content scrolling
Button Component
Action buttons
Questions you might have
React Bottom Drawer No Scale Background
A bottom drawer with shouldScaleBackground false preventing default background scaling animation for static backdrop effect
React Simple Left Drawer
A React left drawer sliding from screen left with Menu icon trigger for navigation and sidebar content using shadcn/ui Drawer