Drawer

A panel that slides in from the edge of the screen (also called Sheet component).

Source

View source code

Issues

Report an issue

Package

@rootui/drawer

Reference

React Aria docs

Preview

Click me to open drawer

side

isKeyboardDismissDisabled

1<Drawer>
2  <Drawer.Trigger>
3    Click me to open drawer
4  </Drawer.Trigger>
5  <Drawer.Content>
6    Hello, I'm the content!
7  </Drawer.Content>
8</Drawer>

Anatomy

1<Drawer>
2  <Drawer.Trigger></Drawer.Trigger>
3  <Drawer.Content></Drawer.Content>
4</Drawer>

Installation

Package

Shadcn CLI

Manual

Note

Please ensure your local environment is fully configured as instructed in the getting started guide.

npm

yarn

pnpm

bun

npm install @rootui/drawer

Usage

1import { Drawer } from "@rootui/drawer";
2
3export default function Page() {
4  return (
5    <Drawer>
6      <Drawer.Trigger>
7        This is the trigger
8      </Drawer.Trigger>
9      <Drawer.Content>
10        This is the content
11      </Drawer.Content>
12    </Drawer>
13  )
14}

API Reference

See the React Aria documentation for more information.

Drawer

Prop	Type	Default
`isOpen`	`Boolean`	`-`
Whether the drawer is open by default (controlled).
`defaultOpen`	`Boolean`	`-`
Whether the drawer is open by default (uncontrolled).
`onOpenChange`	`(isOpen: boolean) => void`	`-`
Handler that is called when the overlay's open state changes.

Drawer.Trigger

Prop	Type	Default
`children`	`ReactNode`	`-`

Drawer.Content

Prop	Type	Default
`isDismissable`	`Boolean`	`false`
Whether to close the drawer when the user interacts outside it.
`isKeyboardDismissDisabled`	`Boolean`	`false`
Whether pressing the escape key to close the drawer should be disabled.
`shouldCloseOnInteractOutside`	`(element: Element) => boolean`	`-`
When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.

Attribute	Description
`data-entering`	Whether the drawer is currently entering. Use this to apply animations.
`data-exiting`	Whether the drawer is currently exiting. Use this to apply animations.