Skip to content

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

Free

Simple Bottom Drawer for React

A bottom drawer titled Drawer Title, with a short description, one line of body text, and Submit and Cancel.

Open Drawer slides a panel up from the bottom. It shows Drawer Title, a short description, one line of body text, and Submit and Cancel.

Start here and swap in your own content. If the panel should not cover the page, use a Collapsible in the page. In React, Base UI closes it when the panel is swiped away.

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

Anatomy

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

Usage

<Drawer showSwipeHandle>
  <DrawerTrigger render={<Button variant="outline" />}>
    Open Drawer
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Drawer Title</DrawerTitle>
      <DrawerDescription>
        This is a simple bottom drawer with header and footer.
      </DrawerDescription>
    </DrawerHeader>
    <div className="p-4">
      <p className="text-muted-foreground text-sm">
        Add your content here. This drawer slides up from the bottom.
      </p>
    </div>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

FAQ

Why does it open from the bottom?

Bottom is the default, so Drawer sets no direction. It slides up from the bottom edge, and a downward swipe closes it. Set swipeDirection on Drawer to up, left or right for the other edges; it names the swipe that closes the drawer.

What's inside the drawer?

DrawerHeader with the title Drawer Title and a description, a paragraph of muted text, and DrawerFooter with Submit and Cancel stacked full width.

How does Cancel close it?

Cancel is a DrawerClose, so pressing it dismisses the drawer. Submit is a plain Button with no handler. The Button goes in the render prop of DrawerClose.

Is there a drag bar?

Yes, a bar at the top edge shows the drawer can be dragged. showSwipeHandle on Drawer turns it on.

How does Open Drawer open it?

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

When should I use a Drawer instead of a Sheet?

Pick a Drawer when people should be able to drag the panel, which feels natural on touch screens. A Sheet slides in from an edge without the drag and suits desktop side panels; a Dialog is centered.

API Reference

Drawer

Sets showSwipeHandle. The rest is on the Drawer page.

Button

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

All 22 drawer examples