Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Bottom

Bottom Drawer Event Details for React

A bottom drawer with an event's badges, date, place, attendee count and description, and Register Now and Maybe Later buttons.

Framework
UI library

Event details that slide up from the bottom: two Badges for the type, three icon rows for when, where and who, a short description, then Register Now and Maybe Later. It keeps people on the schedule they're browsing while they decide.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What does the event drawer show?

The title Design Workshop 2024 and a one-line description, the Workshop and In-Person badges, rows for March 15, 2024 at 2:00 PM, 123 Design Street, San Francisco and 24 people attending, and an About this event paragraph.

Are the icons read aloud?

No. The calendar, pin and people icons are aria-hidden; the text next to each one carries the meaning.

What do Register Now and Maybe Later do?

Maybe Later is a DrawerClose, so it dismisses the drawer. Register Now is a plain Button with no handler: run your sign-up from it and close the drawer when it's done. Pass open to Drawer; onOpenChange receives the next boolean.

What if the description is long?

Give the body min-h-0 flex-1 overflow-y-auto so it scrolls inside the drawer while the header and the buttons stay in view.

How does View Event open the drawer?

An outline button opens the drawer. Its text, View Event, is the accessible name. The Button goes in the render prop of DrawerTrigger.

What does the drawer announce?

DrawerTitle names the dialog for assistive tech, so every drawer renders one; give it sr-only when the design has no visible heading. Here the event's name is the title, and Join us for an immersive design workshop is the description. Swiping it back toward its edge, Escape and a click on the overlay all close it, and focus goes back to the trigger.

All 22 drawer examples