Docs › Components › Drawer

Shadcn Drawer

The shadcn/ui Drawer is a draggable panel that slides up from the bottom of the screen, styled with Tailwind CSS v4 and built on Vaul. It traps focus, supports drag-to-dismiss, and suits mobile flows. Drawers power mobile carts and actions across ShadcnStore blocks.

Key features

• Draggable bottom sheet with drag-to-dismiss.
• Composable Trigger, Content, Header, Footer, and Close.
• Focus trap and a dimmed overlay.
• Controlled or uncontrolled open state.
• Great paired with a Dialog for responsive layouts.

Installation

npx shadcn@latest add drawer

Usage

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

export function Example() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Open</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Move goal</DrawerTitle>
          <DrawerDescription>Set your daily activity goal.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <Button>Submit</Button>
          <DrawerClose asChild>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

Responsive dialog + drawer

Render a Dialog on desktop and a Drawer on mobile using a media-query hook, so each platform gets the natural pattern.

Accessibility

• Always include a DrawerTitle, even if visually hidden, so the panel has a name.
• Keep the drag handle and close affordance obvious.
• Focus moves into the drawer on open and returns to the trigger on close.

When to use the Drawer

Use a Drawer for mobile-first panels the user pulls up: a cart, filters, a quick form, or a details view. On desktop, a Sheet or Dialog usually fits better. For anchored content, use a Popover.

Used in these blocks

• Shopping carts: mobile cart drawer.
• Category filters: mobile filter drawer.
• App shells: mobile navigation.

Related components

A Drawer is opened by a Button, often holds a Form, and pairs with a Dialog for responsive layouts. For edge panels use a Sheet.

FAQ

What is the shadcn drawer used for?

The Drawer is a draggable panel that slides up from the bottom, well suited to mobile actions, forms, and detail views.

What is the difference between Drawer and Sheet?

Drawer is a draggable bottom sheet built on Vaul, ideal for mobile. Sheet slides in from any edge and is common on desktop.

Can I combine Drawer and Dialog responsively?

Yes. A common pattern renders a Dialog on desktop and a Drawer on mobile based on a media query.

How do I close the drawer after submitting?

Control it with open/onOpenChange and set it to false in your handler, or wrap a control in DrawerClose.