Drawer

Slide-in panel from edge of screen. Supports right, left, bottom. Compound component with Header, Body, Footer.

Preview

Usage

import { Drawer } from '@ramtt/ui'

<Drawer open={open} onClose={() => setOpen(false)} side="right">
  <Drawer.Header><Drawer.Title>Details</Drawer.Title></Drawer.Header>
  <Drawer.Body>Content</Drawer.Body>
</Drawer>

Props

PropTypeDefaultDescription
open*booleanDrawer visibility
onClose*() => voidClose handler
side'right' | 'left' | 'bottom''right'Slide direction
size'sm' | 'md' | 'lg''md'Drawer width