Drawer

Edge panel with swipe dismissal. Use for side sheets and bottom sheets when Dialog is too centered.

Examples

Right

Bottom

Overview

Drawer extends dialog with gesture support. Set swipeDirection to match the edge the panel sits on —"right" for a side panel, "down" for a bottom sheet. Prefer Dialog when you do not need swipe or snap points.

tsx

import {
  Button,
  Drawer,
  DrawerTrigger,
  DrawerPortal,
  DrawerBackdrop,
  DrawerViewport,
  DrawerPopup,
  DrawerContent,
  DrawerTitle,
  DrawerDescription,
  DrawerClose,
  DrawerHeader,
} from "@standard-ui/react"

<Drawer swipeDirection="right">
  <DrawerTrigger render={<Button />}>Open drawer</DrawerTrigger>
  <DrawerPortal>
    <DrawerBackdrop />
    <DrawerViewport>
      <DrawerPopup>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Account</DrawerTitle>
            <DrawerDescription>
              Manage profile details and preferences.
            </DrawerDescription>
          </DrawerHeader>
          <DrawerClose render={<Button variant="outline" />}>
            Close
          </DrawerClose>
        </DrawerContent>
      </DrawerPopup>
    </DrawerViewport>
  </DrawerPortal>
</Drawer>

Usage

Swipe direction

swipeDirection controls both dismissal direction and which edge styles apply on DrawerPopup.

tsx

<Drawer swipeDirection="right">{/* side panel */}</Drawer>
<Drawer swipeDirection="down">{/* bottom sheet */}</Drawer>

Anatomy

tsx

Drawer
  DrawerTrigger
  DrawerPortal
    DrawerBackdrop
    DrawerViewport
      DrawerPopup
        DrawerContent
          DrawerHeader
          DrawerClose

API

Part / prop	Role
swipeDirection	`up` \| `down` \| `left` \| `right`. Defaults to `down`.
DrawerTrigger	Opens the drawer. Use Button via render.
DrawerViewport	Full-screen positioning container.
DrawerPopup	Sliding panel surface.
DrawerContent	Scrollable body; safer for text selection while swiping.
DrawerHeader	Layout helper for title and description.