Introduction

An overlay panel that slides in from the edge of the screen, housing temporary content, forms, settings, or multi-step flows. This component allows users to perform tasks, adjust preferences, or review detailed information without losing context of their primary page views.

The Drawer component is fully integrated as a drawer block in the Page Builder, enabling content authors and developers to easily configure trigger buttons, descriptive headers, and custom action footers directly within the CMS.

Usage

These examples illustrate how content editors bind and structure drawer components.

1. Standard Settings Configuration Drawer

A standard configuration panel that includes a title, description, and primary/secondary button triggers.

{
  "type": "drawer",
  "title": "Workspace Preferences",
  "description": "Customize your development workspace configurations.",
  "confirmText": "Apply Changes",
  "cancelText": "Cancel",
  "trigger": [
    {
      "type": "button",
      "text": "Open Settings",
      "variant": "outline"
    }
  ]
}

2. Information Review Drawer with Custom Footer

Features an alternative layout composition where a custom action button list is supplied within the footer array alongside standard controls.

{
  "type": "drawer",
  "title": "System Diagnostics",
  "description": "Real-time node and performance overview.",
  "cancelText": "Dismiss",
  "trigger": [
    {
      "type": "button",
      "text": "Review System Specs"
    }
  ],
  "footer": [
    {
      "type": "button",
      "text": "Refresh Node",
      "variant": "subtle",
      "colorPalette": "blue"
    }
  ]
}

Props

Developer Notes & Accessibility

• Hydration Island: Because the sliding panel relies on client-side state transformations, background overlay dismissals, keyboard focus traps, and touch interactions, it hydrates as an interactive client island by default ("interactive": true).
• WAI-ARIA Compliance: Under the hood, this component complies with overlay specifications (role="dialog", aria-modal="true", aria-labelledby, aria-describedby). Opening the drawer automatically traps keyboard focus inside the panel. Pressing the Escape key or clicking the dimmed backdrop layer dismisses the drawer safely, returning focus back to the triggering element.
• Unified Island Composition: To prevent hydration mismatches and overlay collision bugs inside complex client frames, nested elements (including confirm triggers, close shims, and loading spinners) are bundled inside a single unified island environment.