Shadcn.io is not affiliated with official shadcn/ui
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
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.
Bottom Drawer Event Details preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.