@edux-design/drawers

Token-aware sliding drawer built on Radix Dialog primitives.

Exports: Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerClose, DrawerOverlay, DrawerPortal.

Installation

pnpm add @edux-design/drawers @radix-ui/react-dialog @edux-design/utils
# or
npm install @edux-design/drawers @radix-ui/react-dialog @edux-design/utils

Peer deps: react@>=18, react-dom@>=18.

Usage

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerBody,
  DrawerFooter,
  DrawerClose,
} from "@edux-design/drawers";

export function SettingsDrawer() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <button className="underline text-sm">Open settings</button>
      </DrawerTrigger>

      <DrawerContent side="right">
        <DrawerHeader>
          <h2 className="text-base font-semibold">Settings</h2>
        </DrawerHeader>
        <DrawerBody>
          <p className="text-sm text-fg-subtle">Your content goes here.</p>
        </DrawerBody>
        <DrawerFooter className="flex justify-end gap-8">
          <DrawerClose className="text-sm underline">Close</DrawerClose>
          <button className="text-sm font-medium">Save</button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}

DrawerContent props

• side: "left" | "right" | "top" | "bottom" (default: "right")
• backdropProps / backDropProps: props forwarded to the backdrop/overlay
• className / style
• contentProps for passing additional Radix Dialog.Content props

Drawer root events

• onOpenChange: called with the next open state
• onOpen / onClose: convenience callbacks when state flips

Development

pnpm --filter @edux-design/drawers lint
pnpm --filter @edux-design/drawers check-types
pnpm --filter @edux-design/drawers build

Stories: src/demos/Drawer.stories.jsx.