Drawer

Slide-out panel component that appears from any edge of the screen. Renders via createPortal to document.body.

Also known as: side panel, slide panel, sheet, sidebar, off-canvas

View in Storybook

When to use

• Slide-out panels for secondary content, settings, or detail views. Supports all four positions.
• For centered overlays, use Modal.

Import

import { Drawer } from '@vacano/ui'

Usage

const [open, setOpen] = useState(false)

<Button onClick={() => setOpen(true)}>Open Drawer</Button>

<Drawer open={open}>
  <h2>Drawer Title</h2>
  <p>Drawer content</p>
  <Button onClick={() => setOpen(false)}>Close</Button>
</Drawer>

Positions

// Right side (default)
<Drawer open={open} position="right">Content</Drawer>

// Left side
<Drawer open={open} position="left">Content</Drawer>

// Top
<Drawer open={open} position="top">Content</Drawer>

// Bottom
<Drawer open={open} position="bottom">Content</Drawer>

Custom Size

// Fixed width for left/right
<Drawer open={open} position="right" size="400px">
  Wide drawer
</Drawer>

// Fixed height for top/bottom
<Drawer open={open} position="bottom" size="300px">
  Tall drawer
</Drawer>

// Percentage
<Drawer open={open} position="left" size="50%">
  Half-width drawer
</Drawer>

Animated

<Drawer open={open} animated>
  Slides in with animation
</Drawer>

<Drawer open={open} animated={false}>
  Appears instantly
</Drawer>

Props

Prop	Type	Default	Description
open	boolean	required	Controls whether the drawer is visible
children	ReactNode	-	Drawer content
position	'left' | 'right' | 'top' | 'bottom'	'right'	Edge of the screen the drawer slides from
size	string	'400px'	Width (for left/right) or height (for top/bottom) of the drawer
animated	boolean	false	Enable slide-in animation
className	string	-	CSS class name for the root container
ref	Ref<HTMLDivElement>	-	Ref forwarded to the root container
data-test-id	string	-	Test identifier attribute

The component also accepts all standard HTMLDivElement attributes (except className which is overridden by the component prop).

INFO

The Drawer component does not have a classnames prop -- it uses a single root container element.

Related

• Modal - Centered overlay dialog
• Panel - Titled content section