Drawer / Side Panel
Slide-out drawer component supporting left, right, top, and bottom positions. Focus trapping, overlay backdrop, and mobile-friendly. Built with Headless UI.
Quick Start
1. Import the component:
import Drawer, { DrawerPosition } from '@/components/Drawer';
import { useState } from 'react';2. Use in your component:
const [isOpen, setIsOpen] = useState(false);
<Drawer
panelOpen={isOpen}
setPanelOpen={setIsOpen}
position={DrawerPosition.right}
>
<h2>Drawer Content</h2>
<p>Your content here...</p>
</Drawer>
<button onClick={() => setIsOpen(true)}>
Open Drawer
</button>3. Available positions:
DrawerPosition.top // Opens from top
DrawerPosition.bottom // Opens from bottom (default)
DrawerPosition.left // Opens from left
DrawerPosition.right // Opens from right4. Custom size (optional):
// For left/right drawers, size controls width
<Drawer
panelOpen={isOpen}
setPanelOpen={setIsOpen}
position={DrawerPosition.right}
size="600px" // or size={600}
>
{/* Wider drawer content */}
</Drawer>
// For top/bottom drawers, size controls height
<Drawer
panelOpen={isOpen}
setPanelOpen={setIsOpen}
position={DrawerPosition.bottom}
size="500px" // or size={500}
>
{/* Taller drawer content */}
</Drawer>Interactive Demo
Click any button below to open a drawer from that direction. Try the expand button (↗) in the top-right corner of each drawer to see fullscreen mode.
Custom Size Examples
Use the size prop to customize drawer dimensions. For left/right drawers, it controls width. For top/bottom drawers, it controls height.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| panelOpen | boolean | - | Controls whether drawer is open |
| setPanelOpen | Function | - | Function to toggle drawer state |
| position | DrawerPosition | right | Position from which drawer opens |
| size | string | number | varies | Custom width (left/right) or height (top/bottom). E.g., "600px" or 600 |
| children | ReactNode | - | Content to display in drawer |