Drawer

A swipeable Base UI drawer that can enter from any edge.

Preview#

Anatomy#

drawer

import {
  Drawer,
  DrawerActions,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "raft-ui";

<Drawer>
  <DrawerTrigger />
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle />
    </DrawerHeader>
    <DrawerBody>
      <DrawerDescription />
    </DrawerBody>
    <DrawerFooter>
      <DrawerActions>
        <DrawerClose />
      </DrawerActions>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Usage#

Snap points#

Snap points apply to vertical drawers. Compare separate bottom and top notifications; each expands from an 8rem summary to a 24rem detail view.

Nested close callbacks#

Each nested drawer owns its close callback; removing a member closes the confirmation and details layers together.

Full-width side drawer#

Override DrawerContent on small screens to span the floating inset.

Responsive placement#

Switch swipeDirection at md: bottom on mobile, right on desktop.

API#WIP

Drawer#

open
boolean
Controlled open state. Pair with onOpenChange.
defaultOpendefault: false
boolean
Initial open state for uncontrolled usage.
onOpenChange
(open: boolean, eventDetails) => void
Fires on trigger, close, Escape, outside press, or swipe dismissal.
onOpenChangeComplete
(open: boolean) => void
Fires after the opening or closing transition completes. Attach it to a nested Drawer and check for open === false to observe that layer closing.
modaldefault: true
boolean | "trap-focus"
Controls outside interaction. Use "trap-focus" to contain focus without making the rest of the page inert.
swipeDirectiondefault: "down"
"down" | "up" | "left" | "right"
Direction the drawer follows and can be swiped to dismiss.
snapPoints
Array<number | string>
Preset heights for vertical drawers. Fractions use viewport height, values greater than 1 use pixels, and strings support px or rem.
defaultSnapPoint
number | string | null
Initial snap point for an uncontrolled drawer.
snapPoint
number | string | null
The currently active snap point. Use with onSnapPointChange to control it.
onSnapPointChange
(snapPoint: number | string | null, eventDetails) => void
Called when the active snap point changes.

DrawerTrigger#

...props
Base UI Drawer.Trigger.Props
Opens the drawer. Compose Button through render for visible triggers.

DrawerPortal#

container
HTMLElement | RefObject | null
Custom portal container for framed previews or contained overlays.
...props
Base UI Drawer.Portal.Props
Portals the drawer to the body or a custom container.

DrawerOverlay#

...props
Base UI Drawer.Backdrop.Props
Backdrop behind the drawer while it is open.

DrawerContent#

portalProps
DrawerPortalProps
Pass the Base UI portal container, keepMounted state, or portal element props.
...props
Base UI Drawer.Popup.Props
Portal-backed surface that composes the backdrop, viewport, popup, and selectable content region.

DrawerHeader#

...props
useRender.ComponentProps<"div">
Top region for the drawer title and close action.

DrawerTitle#

...props
Base UI Drawer.Title.Props
Accessible drawer heading.

DrawerDescription#

...props
Base UI Drawer.Description.Props
Accessible supporting copy for the drawer.

DrawerBody#

...props
ComponentPropsWithRef<"div">
Main content area between header and footer.

DrawerActions#

...props
ComponentPropsWithRef<"div">
Width-aware action cluster for one or more actions.

DrawerClose#

variant
Button variant
Button styling for the default close control.
size
Button size
Button size for the default close control.
...props
Base UI Drawer.Close.Props
Closes the drawer. Compose your own visual affordance with render/className.