Drawer

A swipeable Base UI drawer that can enter from any edge while preserving the active theme frame.

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#

Prop	Type	Default	Description
`open`	boolean	—	Controlled open state. Pair with onOpenChange.
`defaultOpen`	boolean	false	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.
`modal`	boolean \| "trap-focus"	true	Controls outside interaction. Use "trap-focus" to contain focus without making the rest of the page inert.
`swipeDirection`	"down" \| "up" \| "left" \| "right"	"down"	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#

Prop	Type	Default	Description
`...props`	Base UI Drawer.Trigger.Props	—	Opens the drawer. Compose Button through render for visible triggers.

DrawerPortal#

Prop	Type	Default	Description
`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#

Prop	Type	Default	Description
`...props`	Base UI Drawer.Backdrop.Props	—	Backdrop behind the drawer while it is open.

DrawerContent#

Prop	Type	Default	Description
`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#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Top region for the drawer title and close action.

DrawerTitle#

Prop	Type	Default	Description
`...props`	Base UI Drawer.Title.Props	—	Accessible drawer heading.

DrawerDescription#

Prop	Type	Default	Description
`...props`	Base UI Drawer.Description.Props	—	Accessible supporting copy for the drawer.

DrawerBody#

Prop	Type	Default	Description
`...props`	ComponentPropsWithRef<"div">	—	Main content area between header and footer.

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Bottom region for actions or metadata.

DrawerActions#

Prop	Type	Default	Description
`...props`	ComponentPropsWithRef<"div">	—	Width-aware action cluster for one or more actions.

DrawerClose#

Prop	Type	Default	Description
`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.