Drawer

A slide-in panel that enters from any edge of the viewport. The triggerLabel prop renders a built-in trigger button. Clicking the overlay or pressing Escape closes the drawer.

Positions

import { Drawer } from '@davaux/ui'

<Drawer triggerLabel="Left"   title="Left Drawer"   position="left" body="..." />
<Drawer triggerLabel="Right"  title="Right Drawer"  position="right" body="..." />
<Drawer triggerLabel="Top"    title="Top Drawer"    position="top" body="..." />
<Drawer triggerLabel="Bottom" title="Bottom Drawer" position="bottom" body="..." />

Sizes

<Drawer triggerLabel="Small"  size="sm" title="Small drawer" body="..." />
<Drawer triggerLabel="Medium" size="md" title="Medium drawer" body="..." />
<Drawer triggerLabel="Large"  size="lg" title="Large drawer" body="..." />

Motion

Each drawer position uses a dedicated slide keyframe. The animation runs at --dv-motion-duration-normal (200ms) with --dv-motion-ease-enter easing so it decelerates into its resting position.

positionkeyframeenters from
leftdv-slide-right-inoff-screen left → resting position
rightdv-slide-left-inoff-screen right → resting position
topdv-slide-down-inoff-screen top → resting position
bottomdv-slide-up-inoff-screen bottom → resting position

Override the duration or easing globally by setting the motion tokens on :root, or scope an override to a parent element. See the Motion page.

/* Slow down all drawers */
.dv-drawer-content {
  animation-duration: var(--dv-motion-duration-slow);
  animation-timing-function: var(--dv-motion-ease-spring);
}

Props

PropTypeDefaultDescription
openedbooleanfalseInitial open state (SSR)
titlestring—Drawer header title
bodystring''Drawer body text
triggerLabelstring—Renders a built-in trigger button
position'left'|'right'|'top'|'bottom''left'Edge the drawer slides in from
size'xs'|'sm'|'md'|'lg'|'xl'|'full''md'Width (or height for top/bottom) of the drawer