Drawer

A drawer component for React.

Radix UI Base UI

About

Drawer is built on top of Vaul by emilkowalski.

Installation

Dialog Dropdown Menu

On This Page

About Installation Usage Examples Scrollable Content Sides Responsive Dialog API Reference

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add drawer

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

<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Use the direction prop to set the side of the drawer. Available options are top, right, bottom, and left.

You can combine the Dialog and Drawer components to create a responsive dialog. This renders a Dialog component on desktop and a Drawer on mobile.

"use client"

import * as React from "react"

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Drawer,

import { Button } from "@/components/ui/button"
import {
  Drawer,