# Drawer Bottom 7 - Bottom drawer event details

> Bottom sheet showing event title, time, location, and RSVP actions.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/drawer-drawer-bottom-7).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/drawer-drawer-bottom-7
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/drawer-drawer-bottom-7-light-a227e374f6f4f738.png
- Registry item: https://shadcnblocks.com/r/drawer-drawer-bottom-7.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/drawer-drawer-bottom-7.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `badge`, `button`, `drawer`

## Files

### `example/drawer/drawer-bottom-7.tsx`

```tsx
"use client";

import { Calendar, MapPin, Users } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

export const title = "Bottom Drawer Event Details";

const Example = () => (
  <Drawer>
    <DrawerTrigger asChild>
      <Button variant="outline">View Event</Button>
    </DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Design Workshop 2024</DrawerTitle>
        <DrawerDescription>
          Join us for an immersive design workshop
        </DrawerDescription>
      </DrawerHeader>
      <div className="space-y-4 p-4">
        <div className="flex items-center gap-2">
          <Badge>Workshop</Badge>
          <Badge variant="outline">In-Person</Badge>
        </div>
        <div className="space-y-3">
          <div className="flex items-center gap-3 text-sm">
            <Calendar className="h-4 w-4 text-muted-foreground" />
            <span>March 15, 2024 at 2:00 PM</span>
          </div>
          <div className="flex items-center gap-3 text-sm">
            <MapPin className="h-4 w-4 text-muted-foreground" />
            <span>123 Design Street, San Francisco</span>
          </div>
          <div className="flex items-center gap-3 text-sm">
            <Users className="h-4 w-4 text-muted-foreground" />
            <span>24 people attending</span>
          </div>
        </div>
        <div>
          <h4 className="mb-2 text-sm font-medium">About this event</h4>
          <p className="text-sm text-muted-foreground">
            Learn the latest design trends and techniques from industry experts.
            This hands-on workshop covers everything from basics to advanced
            concepts.
          </p>
        </div>
      </div>
      <DrawerFooter>
        <Button>Register Now</Button>
        <DrawerClose asChild>
          <Button variant="outline">Maybe Later</Button>
        </DrawerClose>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>
);

export default Example;
```