Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Bottom Drawer Event Details for Solid

A bottom drawer for Design Workshop 2024, with badges, the date, the place, 24 attendees, and Register Now.

UI library: Ark UI

Design Workshop 2024 slides up with Workshop and In-Person badges, the date, a San Francisco address, and 24 people attending. Register Now and Maybe Later sit at the bottom.

Use it on a schedule so people can decide without leaving the list. On a wide screen, the same details can sit in a Dialog. In Solid, Ark UI closes the panel when it is swiped away.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Drawer anatomy: grabber, title, description, content, close

Usage

<Drawer>
    <DrawerTrigger asChild={props => <Button {...props()} variant="outline">View Event</Button>} />
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Design Workshop 2024</DrawerTitle>
        <DrawerDescription>
          Join us for an immersive design workshop
        </DrawerDescription>
      </DrawerHeader>
      <div class="flex flex-col gap-4 p-4">
        <div class="flex items-center gap-2">
          <Badge>Workshop</Badge>
          <Badge variant="outline">In-Person</Badge>
        </div>
        <div class="flex flex-col gap-3 text-sm">
          <div class="flex items-center gap-3">
            <CalendarIcon aria-hidden="true" class="size-4 text-muted-foreground" />
            <span>March 15, 2024 at 2:00 PM</span>
          </div>
          <div class="flex items-center gap-3">
            <MapPinIcon aria-hidden="true" class="size-4 text-muted-foreground" />
            <span>123 Design Street, San Francisco</span>
          </div>
          <div class="flex items-center gap-3">
            <UsersIcon aria-hidden="true" class="size-4 text-muted-foreground" />
            <span>24 people attending</span>
          </div>
        </div>
        <div class="flex flex-col gap-2">
          <h3 class="font-medium text-sm">About this event</h3>
          <p class="text-muted-foreground text-sm">
{/* The rest of the file is under Installation. */}

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 and read details.open in onOpenChange.

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. asChild on DrawerTrigger receives props: spread them onto the button.

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.

API Reference

Drawer

Sets asChild and props. The rest is on the Drawer page.

Button

Sets props and variant="outline". The rest is on the Button page.

Badge

Sets variant="outline". The rest is on the Badge page.

All 22 drawer examples