pnpm add @wandercom/design-system-web

The Drawer component provides both a high-level API and low-level primitives for advanced composition. By default, left and right drawers automatically slide from the bottom on narrow viewports. Pass containerRef when that decision should follow an embedding container; container-driven drawers use a 65rem (1040px) narrow/wide boundary. An open high-level drawer closes when its responsive mode changes. A built-in close button is rendered in the top-right corner of the content area.

Use the simplified Drawer component for most use cases:

import { Drawer } from '@wandercom/design-system-web/ui/drawer';
import { Button } from '@wandercom/design-system-web/ui/button';

export function Example() {
  return (
    <Drawer
      trigger={<Button>Open</Button>}
      title="Account settings"
      description="Manage your account preferences"
      primaryAction={{ label: "Save", action: () => console.log("saved") }}
      secondaryAction={{ label: "Cancel", action: () => console.log("cancelled") }}
    >
      <div>Content here</div>
    </Drawer>
  );
}

For advanced composition, use the individual primitives. Note that DrawerClose renders a pre-styled icon button in the top-right corner and is not intended for use as a labeled cancel button.

import {
  DrawerRoot,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
  DrawerClose,
} from '@wandercom/design-system-web/ui/drawer';
import { Button } from '@wandercom/design-system-web/ui/button';

export function Example() {
  return (
    <DrawerRoot>
      <DrawerTrigger render={<Button variant="outline">Open</Button>} />
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Account settings</DrawerTitle>
          <DrawerDescription>Manage your account preferences</DrawerDescription>
        </DrawerHeader>
        <div>Content here</div>
        <DrawerFooter>
          <Button variant="outline">Cancel</Button>
          <Button>Save</Button>
        </DrawerFooter>
        <DrawerClose />
      </DrawerContent>
    </DrawerRoot>
  );
}

Stack drawers by nesting DrawerRoot components. The inner drawer opens on top of the outer one, and each manages its own open/close state independently.

Renders a pre-styled ghost icon button with an X icon, absolutely positioned in the top-right corner of the drawer.

• Built on Base UI's drawer primitive, which follows WAI-ARIA dialog patterns
• Closes on escape key press and overlay click when modal
• Links title and description via aria-labelledby / aria-describedby
• Returns focus to the trigger element on close
• Supports swipe-to-dismiss gestures matching the drawer direction