Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Drawer

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

SourceStorybookRecipeArk

Setup

If you don't already have the snippet, run the following command to add the drawer snippet

chakra snippet add drawer

The snippet includes a closed component composition for the Drawer component.

Usage

import {
  DrawerBackdrop,
  DrawerBody,
  DrawerCloseTrigger,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerRoot,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
<DrawerRoot>
  <DrawerBackdrop />
  <DrawerTrigger />
  <DrawerContent>
    <DrawerCloseTrigger />
    <DrawerHeader>
      <DrawerTitle />
    </DrawerHeader>
    <DrawerBody />
    <DrawerFooter />
  </DrawerContent>
</DrawerRoot>

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.

Offset

Pass the offset prop to the DrawerContent to change 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.

Props

Root

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

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

contained
'true' | 'false'

The contained 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.

Previous

Dialog

Next

Editable