Delphi Design

A drawer component for secondary content and actions.

Usage

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
} from "@delphi/ui";

export function Example() {
  return (
    <Drawer>
      <DrawerTrigger>Open Drawer</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Drawer Title</DrawerTitle>
          <DrawerDescription>Drawer description</DrawerDescription>
        </DrawerHeader>
        <div>Drawer content here</div>
      </DrawerContent>
    </Drawer>
  );
}

API Reference

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`shouldScaleBackground`	`boolean`	`true`	Whether to scale background content

DrawerContent Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Use drawers for secondary content that doesn't warrant a full page

Always include a DrawerTitle for accessibility

Use DrawerDescription to provide context for screen readers

Allow closing by swiping down (mobile) or clicking overlay

Keep drawer content focused on a single task or view

Use drawers for critical actions that require confirmation — use Dialog

Stack multiple drawers on top of each other

Put long scrolling content in drawers — use a full page instead

Disable the swipe-to-dismiss gesture unless absolutely necessary