Vanilla UI Kit Drawer v1.0.0 · modal → toast →

Side sheets, one file.

Zero-dependency drawers for filters, carts and mobile nav — focus-trapped, scroll-locked, theme-aware. Click anything below — every card is live.

Four sides

Right is the default; top/bottom take a height instead of a width.

Drawer.open({ side: 'left',
  title: 'Navigation',
  size: '320px' })       // width, or height
                         // for top/bottom

Enhance existing markup

The hidden #cart-panel below this card is adopted into the drawer and restored on close.

<button data-vdr-open="#cart-panel">
<div id="cart-panel" hidden
     data-vdr-title="Your cart">…
// or: new Drawer('#cart-panel').open()

Buttons footer

Same shape as Modal's buttons — close becomes the onClose result; return false to stay open.

Drawer.open({
  buttons: [
    { label: 'Reset', onClick: h => false },
    { label: 'Apply', variant: 'primary',
      close: 'applied' }
  ],
  onClose: r => r === 'applied' && apply()
})

Non-dismissible

No ✕, and Esc / backdrop clicks are ignored — only the button closes it.

Drawer.open({ dismissible: false,
  buttons: [{ label: 'Done',
    variant: 'primary', close: true }] })

Nested / stacked

Each drawer opens above the last; Esc peels only the top one.

// inside a button's onClick:
Drawer.open({ side: 'bottom', … })
return false   // keep the first one open

Family theming

With the VC core loaded, one call themes every component.

VC.config({ accent: '#b45309' })