Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsShowcaseBlogGuides
Sponsor

Drawer

Used to render a content that slides in from the side of the screen.

SourceStorybookRecipeArk
AI TipWant to skip the docs? Use the MCP Server

Usage

import { Drawer } from "@chakra-ui/react"
<Drawer.Root>
  <Drawer.Backdrop />
  <Drawer.Trigger />
  <Drawer.Positioner>
    <Drawer.Content>
      <Drawer.CloseTrigger />
      <Drawer.Header>
        <Drawer.Title />
      </Drawer.Header>
      <Drawer.Body />
      <Drawer.Footer />
    </Drawer.Content>
  </Drawer.Positioner>
</Drawer.Root>

Examples

Controlled

Use the open and onOpenChange props to control the drawer component.

Sizes

Use the size prop to change the size of the drawer component.

Context

Use the DrawerContext component to access the drawer state and methods from outside the drawer.

Offset

Use the padding CSS property on Drawer.Positioner to adjust the offset of the drawer component.

Placement

Use the placement prop to change the placement of the drawer component.

Initial Focus

Use the initialFocusEl prop to set the initial focus of the drawer component.

Custom Container

Here's an example of how to render the drawer component in a custom container.

Consider setting closeOnInteractOutside to false to prevent the drawer from closing when interacting outside the drawer.

Render drawer here

Header Actions

Here's an example of rendering actions in the header of the drawer component.

Drawer with conditional variants

Here is an example of how to change variants based on the different breakpoints.

This example uses the mdDown breakpoint to change the drawer's placement on smaller screens. This approach is recommended because both conditions are translated into CSS media queries, which helps avoid base style merging issues.

If you really want to use the base condition instead, you’ll also need to define corresponding sizes. For example: <Drawer.Root placement={{ base: "bottom", md: "end" }} size={{ base: "xs", md: "md" }}>

Open drawer and resize screen to mobile size

Props

Root

PropDefaultType
closeOnEscape true
boolean

Whether to close the dialog when the escape key is pressed

closeOnInteractOutside true
boolean

Whether to close the dialog when the outside is clicked

defaultOpen false
boolean

The initial open state of the dialog when rendered. Use when you don't need to control the open state of the dialog.

lazyMount false
boolean

Whether to enable lazy mounting

modal true
boolean

Whether to prevent pointer interaction outside the element and hide all content below it

preventScroll true
boolean

Whether to prevent scrolling behind the dialog when it's opened

role 'dialog'
'dialog' | 'alertdialog'

The dialog's role

skipAnimationOnMount false
boolean

Whether to allow the initial presence animation.

trapFocus true
boolean

Whether to trap focus inside the dialog when it's opened

unmountOnExit false
boolean

Whether to unmount on exit.

colorPalette gray
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'

The color palette of the component

size xs
'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'

The size of the component

placement end
'start' | 'end' | 'top' | 'bottom'

The placement of the component

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

aria-label
string

Human readable label for the dialog, in event the dialog title is not rendered

finalFocusEl
() => MaybeElement

Element to receive focus when the dialog is closed

id
string

The unique identifier of the machine.

ids
Partial<{ trigger: string positioner: string backdrop: string content: string closeTrigger: string title: string description: string }>

The ids of the elements in the dialog. Useful for composition.

immediate
boolean

Whether to synchronize the present change immediately or defer it to the next frame

initialFocusEl
() => MaybeElement

Element to receive focus when the dialog is opened

onEscapeKeyDown
(event: KeyboardEvent) => void

Function called when the escape key is pressed

onExitComplete
VoidFunction

Function called when the animation ends in the closed state

onFocusOutside
(event: FocusOutsideEvent) => void

Function called when the focus is moved outside the component

onInteractOutside
(event: InteractOutsideEvent) => void

Function called when an interaction happens outside the component

onOpenChange
(details: OpenChangeDetails) => void

Function to call when the dialog's open state changes

onPointerDownOutside
(event: PointerDownOutsideEvent) => void

Function called when the pointer is pressed down outside the component

open
boolean

The controlled open state of the dialog

persistentElements
(() => Element | null)[]

Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event

present
boolean

Whether the node is present (controlled by the user)

restoreFocus
boolean

Whether to restore focus to the element that had focus before the dialog was opened

contained
'true' | 'false'

The contained of the component

Previous

Dialog

Next

Hover Card