Panel vs Modal - brij.js

brij.js supports two display modes. Pass mode in the options to Brij.open().

Brij.open('contact', { mode: 'panel' })   // slide-in from the right
Brij.open('contact', { mode: 'modal' })   // centered dialog

Panel (default)

The panel slides in from the right edge of the viewport. It sits at full height with a semi-transparent backdrop covering the rest of the page.

Best for: forms that take a moment to fill out, contextual flows that don’t interrupt the underlying page, embedded tools.

Width: min(92vw, 480px). Border radius: 20px 0 0 20px.

The modal renders centered on the page. Width: min(92vw, 640px). Max height: min(88vh, 860px).

Best for: short confirmations, one-step forms, anything that should feel like a dialog rather than a panel.

Both modes render a full-viewport backdrop button. Clicking it calls Brij.close() and fires the onClose callback.

Mode is set per open() call, not per-form. You can open the same slug in different modes depending on context:

const mode = window.innerWidth < 640 ? 'modal' : 'panel'
Brij.open('contact', { mode })