Drawer

Open

Contract

Overview

Machine-readable contract from Component Spec.

component: drawerexport: Drawerversion: 1attributes: data-refineui=drawer

Anatomy

Part	data-refineui
root	drawer

Variants

Axis	Values
type	overlay, inline
size	sm, md, lg

States

Scope	Category	Values
component	component	data-state: open, closed
component	environment	forced-colors, dir
drawer	component	data-state: open, closed

Accessibility

Slot	Element	Role
drawer	div	dialog

Keyboard

Key	Action	Native
Escape	close	—

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible
behavior	trap	true
behavior	initial	first-focusable
behavior	return	trigger

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerBody,
  DrawerFooter,
  DrawerClose,
  Button
} from "@refineui/react";

<Drawer>
  <DrawerTrigger asChild>
    <Button>Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Settings</DrawerTitle>
      <DrawerDescription>Adjust your preferences</DrawerDescription>
    </DrawerHeader>
    <DrawerBody>
      {/* Drawer content */}
    </DrawerBody>
    <DrawerFooter>
      <DrawerClose>Close</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

<Drawer type="inline" placement="left" size="md" showFooter>
  {/* Drawer content */}
</Drawer>

API Reference

Drawer

Prop	Default	Type	Description
open	—	boolean	Controlled open state.
defaultOpen	—	boolean	Uncontrolled initial open state.
onOpenChange	—	(open: boolean) => void	Event handler when open state changes.
type	"overlay"	"overlay" | "inline"	Drawer display type.
placement	"right"	"left" | "right"	Side of the screen.
size	"md"	"sm" | "md" | "lg"	Drawer width.
showFooter	false	boolean	Shows footer section.

DrawerTrigger

Trigger element (usually a Button).

DrawerContent

Drawer panel container.

DrawerHeader

Prop	Default	Type	Description
showClose	true	boolean	Shows the close button.
actions	—	ReactNode	Additional header actions.

DrawerTitle

Drawer heading element.

DrawerDescription

Drawer description text.

DrawerBody

Scrollable content area.

DrawerFooter

Prop	Default	Type	Description
state	—	"icons" | "single" | "split"	Footer button layout.

DrawerClose

Close button.