Drawer

A panel from the right edge for details that keep the list in view.

import { Button, Drawer } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function DrawerBasic() {
  return (
    <Preview overlay={true}>
      <Drawer.Root swipeDirection="right">
        <Drawer.Trigger render={<Button.Root />}>Open drawer</Drawer.Trigger>
        <Drawer.Content>
          <Drawer.Header>
            <Drawer.Title>Title</Drawer.Title>
            <Drawer.Description>Description</Drawer.Description>
          </Drawer.Header>
        </Drawer.Content>
      </Drawer.Root>
    </Preview>
  );
}

• Use a drawer to inspect one item, such as a span or a log line, without leaving the list.
• Use a Dialog for a task that needs the person’s full attention, such as a form.
• Pass swipeDirection="right" to Drawer.Root. Base UI defaults to "down", so without it a swipe doesn’t close the drawer.
• Drawer.Header, Drawer.Body and Drawer.Footer are the Dialog parts, so a drawer and a dialog share their spacing.

API

Parts: Root, Body, Content, Description, Footer, Header, Title, and Base UI’s Trigger and Close. Content renders the portal, backdrop and viewport itself and passes its other props to the Base UI Popup; the other Base UI parts come through unchanged. Built on Base UI Drawer.