Shadcn Drawer Components

Shadcn Drawer Component

The Shadcn Drawer is a panel that slides in from an edge of the screen and can be dragged closed with a swipe. It feels native on phones, where a bottom sheet is easier to reach than a centered dialog, and it works just as well on desktop for side panels, quick forms and extra details that should not take the user to a new page.

A drawer that drops down from the top, a scrollable panel on the right, cookie settings, a login form and an add task form show how far a shadcn drawer can go beyond a simple bottom sheet. It is powered by Vaul, a drawer library built on top of the Radix UI Dialog primitive, and styled with shadcn/ui, React and Tailwind CSS, so it drops into both Radix UI and Base UI projects.

What is the Shadcn Drawer Component?

A drawer is a modal surface attached to one edge of the viewport. Set the direction prop to bottom (the default), top, left or right. While it is open, the page behind it is covered by an overlay, focus is trapped inside the panel and the user can close it with the Escape key, a click outside, a close button or by dragging it back toward the edge. Bottom drawers show a small handle that hints at the drag gesture.

Choose a drawer when the interaction should feel like a mobile bottom sheet or when drag to dismiss matters. For a side panel on desktop with no gesture support, a Sheet is simpler. For a short confirmation that needs an explicit answer, use an Alert Dialog, and for small non modal content next to a trigger, use a Popover.

Anatomy of the Shadcn Drawer

6 Shadcn Drawer Variants

Each drawer variant listed here is previewed live at the top of this page, together with its source code and install command.

• Top drawer: Slides down from the top of the screen with a session expired message and Login and Cancel actions.
• Scrollable right drawer: A side panel from the right with a fixed header and footer and a long body that scrolls on its own.
• Info drawer: A bottom drawer opened from a More Info button that shows extra context with a single Close action.
• Cookie settings: A bottom drawer with a cookie consent message, an Accept all button and a Cancel button.
• Login form: A bottom drawer with email and password fields, useful for asking users to sign in again without leaving the page.
• Add task form: A right drawer with a task name input, an assignee select with avatars and a due date picker built from a popover and calendar.

How to Install the Shadcn Drawer Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a drawer variant by its name:

npx shadcn@latest add @shadcnuikit/drawer1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Drawer Component

Wrap a trigger and the content in Drawer. Put the title and description inside DrawerHeader, your actions inside DrawerFooter, and use DrawerClose for the cancel button.

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

export function ShareDrawer() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Share</Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Share this project</DrawerTitle>
            <DrawerDescription>
              Anyone with the link can view it.
            </DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <Button>Copy link</Button>
            <DrawerClose asChild>
              <Button variant="outline">Cancel</Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}

Why Use the Shadcn Drawer Component

• Native feeling on mobile: Swipe to dismiss and a bottom position make it behave like the sheets users know from iOS and Android.
• Four directions: One component covers bottom sheets, top banners and left or right side panels.
• Accessible modal: Focus trapping, Escape to close, scroll locking and ARIA labelling come from the dialog primitive under Vaul.
• Keeps users in context: Forms and details open over the current page, so users do not lose their place.
• Simple composition: Header, footer, title and close parts give every drawer the same structure with very little code.

Common Drawer Use Cases

• Mobile menus and actions: Bottom sheets with share options, filters or quick actions on small screens.
• Quick forms: Add task, add contact or sign in forms that should not need their own page.
• Cookie and consent notices: Consent messages with accept and manage buttons that users can dismiss.
• Detail panels: Order, user or file details that open from a list without leaving it.
• Responsive dialogs: Show a drawer on phones and a dialog on desktop for the same content.

Customizing the Shadcn Drawer

The panel background, border and rounded corners live in the DrawerContent classes, and every part accepts a className. Limit the width of the inner content with a wrapper such as mx-auto w-full max-w-sm, as the variants on this page do, and change the height of top and bottom drawers with a max-h-* class. Colors follow your theme variables, and the free Theme Generator can create a matching palette.

To control the drawer from state, for example to close it after a form submits, use the open and onOpenChange props:

const [open, setOpen] = useState(false)

<Drawer open={open} onOpenChange={setOpen} direction="right">
  ...
</Drawer>

Drawer Accessibility and Keyboard Support

Vaul renders the drawer as a modal dialog, so the panel has role="dialog", focus moves into it when it opens and returns to the trigger when it closes. Always include a DrawerTitle, even if you hide it visually with sr-only, because it gives the dialog its accessible name.

Drag to dismiss is a convenience, not the only way out. Keep a visible close or cancel button in every drawer so keyboard and assistive technology users can leave without a gesture.

Drawer Best Practices

• Use the bottom direction for mobile first actions and left or right for desktop side panels.
• Keep the content focused on one task; if it grows into a full page, link to a page instead.
• Put the primary action first in the footer and the cancel button right after it.
• Make long content scroll inside the body while the header and footer stay visible.
• Close the drawer and show feedback after a form inside it submits successfully.
• For desktop side panels without drag gestures, consider a Sheet.

Components Related to Drawer

Shadcn Drawer FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.