Skip to content

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

Free

Simple Bottom Drawer for Ark UI

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, Ark 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>
  <DrawerTrigger asChild>
    <Button variant="outline">Open Drawer</Button>
  </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 asChild>
        <Button variant="outline">Cancel</Button>
      </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. DrawerClose takes asChild and merges onto the Button inside it.

Is there a drag bar?

Yes, a bar at the top edge shows the drawer can be dragged. DrawerContent draws it by default; showBar={false} hides it.

How does Open Drawer open it?

An outline button opens the drawer. Its text, Open Drawer, is the accessible name. DrawerTrigger takes asChild and merges onto the one Button inside it.

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 asChild. The rest is on the Drawer page.

Button

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

All 22 drawer examples