Drawer

InstallationCopy Anchor Link

UsageCopy Anchor Link

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

export function FilterDrawer() {
  return (
    <Drawer side="start">
      <DrawerTrigger render={<Button variant="outline" />}>Filter</DrawerTrigger>
      <DrawerContent closeLabel="Close">
        <DrawerHeader>
          <DrawerTitle>Filter</DrawerTitle>
          <DrawerDescription>Choose what appears in the request list.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <DrawerClose render={<Button />}>Apply</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}

Use a Drawer for content that sits beside the page and should not leave it: a navigation menu on a phone, filters, a details panel. For a decision that must be answered, use a Dialog. side is start, end, top or bottom. start and end follow the page direction, so a start drawer is on the left in English and on the right in Arabic, and swiping toward that edge closes it. Give it a DrawerTitle.

AnatomyCopy Anchor Link

• Backdrop: dims the page and makes it inert.
• Content: the panel, 346px wide on the sides and full width at the top or bottom. White (background-menu) or gray (neutral-100).
• Header: DrawerTitle and DrawerDescription.
• Footer: DrawerFooter, pushed to the bottom, with the actions on the end side.
• Close button: in the corner, on the end side.

ExamplesCopy Anchor Link

SidesCopy Anchor Link

The four sides. Open the first one in each direction and compare where it appears.

NavigationCopy Anchor Link

The gray tone, a start drawer with a list of links. Links are ordinary buttons that render an <a>.

Controlled, without the corner buttonCopy Anchor Link

Pass open and onOpenChange to open the drawer from your own code, and set showCloseButton={false} when the footer already has a close action. Escape and a click on the page behind still close it.

RTLCopy Anchor Link

start and end swap: the same drawer slides in from the right on Arabic pages, with its border on the left, and a swipe toward the right closes it. The slide animation mirrors with it.

AccessibilityCopy Anchor Link

• Built on Base UI Drawer: a modal dialog with aria-labelledby and aria-describedby. The page behind is inert and its scroll is locked.
• Focus is trapped inside and returns to the trigger on close. Swiping is an extra way to close it, never the only one.
• The close button has an accessible name (closeLabel). Text and icons are 4.5:1 and 3:1 or better on the white and gray surfaces, in light and dark.
• With reduced motion the drawer appears without sliding.

API ReferenceCopy Anchor Link

Deviations from DGACopy Anchor Link

• Figma's Slideout Menu is a 346px panel that is part of the layout. This is a modal drawer: focus trap, Escape and swipe. The side panel in your layout is a navigation list, not this.
• The border next to the page is logical (border-e or border-s). DGA's border-right and slide direction are physical, so they would be on the wrong side in Arabic.

ContrastCopy Anchor Link