Drawer

A modal panel that slides in from any edge and can be swiped away. Set swipeDirection to right or left for a side sheet.

When to use

Use when: A bottom sheet on mobile, or a side panel for filters, details, or an edit form next to the page.
Avoid when: The task needs full attention and a clear decision; use Dialog or Alert Dialog.

Installation

bunx shelf add drawer

The source lands in src/components/ui/drawer.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Drawer from "@/components/ui/drawer";
import { Button } from "@/components/ui/button";

<Drawer.Root swipeDirection="right">
  <Drawer.Trigger render={<Button variant="outline" />}>Edit profile</Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>Edit profile</Drawer.Title>
    </Drawer.Header>
    …
    <Drawer.Footer>
      <Drawer.Close render={<Button />}>Save</Drawer.Close>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Examples

Side

Opens as a panel from the edge, for forms and details.

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.