Drawer

A panel that slides in from the edge of the screen, with swipe to dismiss.

Installation

Usage

Import

Import the component and its related parts.

import {
  Drawer,
  DrawerTrigger,
  DrawerPopup,
  DrawerHeader,
  DrawerTitle,
  DrawerBody,
  DrawerDescription,
  DrawerFooter,
  DrawerClose
} from "components/selia/drawer";

Structure

How to put the parts together.

<Drawer>
  <DrawerTrigger>Open Drawer</DrawerTrigger>
  <DrawerPopup>
    <DrawerHeader>
      <DrawerTitle>Drawer Title</DrawerTitle>
    </DrawerHeader>
    <DrawerBody>
      <DrawerDescription>Drawer Description</DrawerDescription>
    </DrawerBody>
    <DrawerFooter>
      <DrawerClose>Close</DrawerClose>
    </DrawerFooter>
  </DrawerPopup>
</Drawer>

Direction

Use the direction prop on DrawerPopup to control which edge the drawer slides in from. Defaults to right.

<DrawerPopup direction="left">...</DrawerPopup>
<DrawerPopup direction="right">...</DrawerPopup>
<DrawerPopup direction="top">...</DrawerPopup>
<DrawerPopup direction="bottom">...</DrawerPopup>

Make sure swipeDirection on Drawer matches the direction so swipe to dismiss works correctly.

<Drawer swipeDirection="left">
  <DrawerPopup direction="left">...</DrawerPopup>
</Drawer>

Examples

Bottom

Bottom drawer for confirmations or action sheets.

Left

Left drawer, good for navigation menus.

Top

Top drawer for banners or alerts.

Snap Points

The drawer can snap to preset heights as you drag. Pass an array to the snapPoints prop. Use numbers between 0 and 1 for viewport fractions, or strings like '31rem' for fixed sizes.

Scrolling

Long content scrolls inside the body. The header and footer stay in place.

Non-Modal

A drawer that does not trap focus or block the page. Set modal={false} and disablePointerDismissal on Drawer, and backdrop={false} on DrawerPopup.

Indent

Scales down the background when the drawer opens. Wrap your content with DrawerProvider, DrawerIndentBackground, and DrawerIndent. Pass portalContainer to DrawerPopup so the drawer renders inside the container.

Swipe Area

Place DrawerSwipeArea inside Drawer to let users swipe from the edge to open the drawer. No button needed.

Nested

Drawers can be nested. They stack with a scale and peek effect, and each one manages focus on its own.

Settings

A settings panel with form fields, checkboxes, and radio groups. The body scrolls while the header and footer stay fixed.