Skip to content

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

Free

Simple Bottom Drawer for Solid

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

UI library: Ark UI

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 Solid, Ark UI closes it when the panel 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">Open Drawer</Button>} />
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Drawer Title</DrawerTitle>
        <DrawerDescription>
          This is a simple bottom drawer with header and footer.
        </DrawerDescription>
      </DrawerHeader>
      <div class="p-4">
        <p class="text-muted-foreground text-sm">
          Add your content here. This drawer slides up from the bottom.
        </p>
      </div>
      <DrawerFooter>
        <Button>Submit</Button>
        <DrawerClose asChild={props => <Button {...props()} variant="outline">Cancel</Button>} />
      </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. asChild on DrawerClose receives props: spread them onto the button.

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

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

Button

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

All 22 drawer examples