Drawer

The Drawer component provides a hidden or off-canvas panel that can slide in or out from the edge of the screen, offering additional navigation or content without obstructing the main interface. One common use case is when user is analysing a list of entries from a table and they quickly wants to see details for some entries.

Usage

The Drawer component uses a slot-based API for its structure. Use DrawerHeader, DrawerContent, and DrawerFooter as child components to compose your drawer:


import { Drawer, DrawerHeader, DrawerContent, DrawerFooter } from 'reablocks';
 
<Drawer open={open} onClose={() => setOpen(false)}>
  <DrawerHeader>Drawer Title</DrawerHeader>
  <DrawerContent>
    {/* Your content here */}
  </DrawerContent>
  <DrawerFooter>
    {/* Footer actions here */}
  </DrawerFooter>
</Drawer>

All three slots are optional - you can use any combination of them based on your needs.

Examples

Basic example

Drawer as bottom sheet

Custom Animation

Define custom animations for the drawer, using the animation, animationViewChange props:

Learn more about how to customize the animations in the Custom Animations section.

Theme

This component uses the following default theme:

root{}(7 keys)

Learn more about how to customize in the Theme documentation.

API

Name	Type	Default
`position`	`"start" \| "end" \| "top" \| "bottom"` Position of the drawer.	`'end'`
`size`	`string \| number` Size of the drawer.	`'80%'`
`className`	`string` CSS class name for the drawer.
`contentClassName`	`string` CSS class name for the content of the drawer.
`backdropClassName`	`string` CSS class name for the backdrop of the drawer.
`disablePadding`	`boolean` Whether to disable padding for the drawer content.	`false`
`header`	`ReactNode` The header of the drawer. Deprecated: Use DrawerHeader slot component instead.
`showCloseButton`	`boolean` Whether to show the close button.	`true`
`children`	`ReactNode` The content of the drawer. Supports slot-based approach with DrawerHeader, DrawerContent, and DrawerFooter.
`headerElement`	`ReactElement<DrawerHeaderProps, ForwardRefExoticComponent<DrawerHeaderProps & RefAttributes<HTMLElement>>> \| null` The React element for the drawer header. Deprecated: Use DrawerHeader slot component instead.	`<DrawerHeader />`
`theme`	`DrawerTheme` Theme for the Drawer.
`initial`	`boolean \| TargetAndTransition \| VariantLabels` Deprecated: Use animation configuration instead.
`animate`	`boolean \| TargetAndTransition \| VariantLabels` Deprecated: Use animation configuration instead.
`exit`	`TargetAndTransition \| VariantLabels` Deprecated: Use animation configuration instead.
`transition`	`Transition` Deprecated: Use animation configuration instead.
`animation`	`MotionNodeAnimationOptions` Animation configuration for the drawer.
`open`	`boolean` If true, the global overlay is open.
`closeOnBackdropClick`	`boolean` If true, the global overlay will close when the backdrop is clicked.	`true`
`hasBackdrop`	`boolean` If true, the global overlay will have a backdrop.	`true`
`closeOnEscape`	`boolean` If true, the global overlay will close when the escape key is pressed.	`true`
`onClose`	`() => void` A function that is called when the global overlay is closed.