Introduction

A panel that slides in from the edge of the screen to present content or actions without leaving the current page.

Usage

Basic Drawer

import { Drawer, Button } from "../components/ui";

export default function MyPage() {
  return (
    <Drawer
      trigger={<Button>Open Drawer</Button>}
      title="Settings"
      description="Adjust your preferences."
      body="Drawer body content goes here."
      cancel={<Button variant="outline">Close</Button>}
      confirm={<Button>Save</Button>}
    />
  );
}

CMS Page Builder

This component is available as a drawer block in the Page Builder (content/pages/*.json). trigger is a nested block list (the CMS always submits an array):

{
  "type": "drawer",
  "title": "Settings",
  "description": "Adjust your preferences.",
  "confirmText": "Save",
  "cancelText": "Close",
  "trigger": [{ "type": "button", "text": "Open Drawer" }]
}

Props

Drawer

| title | `string \ | JSX.Element` | The drawer title. | | description | `string \ | JSX.Element` | The drawer description. | | body | `string \ | JSX.Element` | The main body content. | | footer | `string \ | JSX.Element` | Custom footer content. |

| cancel | JSX.Element | Element rendered as a close (cancel) trigger. | | confirm | JSX.Element | Element rendered as an action trigger. | | closable | boolean | Whether to show the close button. Default: true. | | interactive | boolean | Enable client-side hydration for interactive behavior. | | class | string | Custom CSS classes for the root element. |

Additional props (e.g. open, defaultOpen, onOpenChange, id) are forwarded to the underlying drawer primitive.