Drawer

Alpha

An accessible side panel overlay with focus trapping, slide animation, and compound component API. Semantically a modal dialog that slides in from a chosen edge.

Import

import { Drawer } from "@compa11y/react";

Usage

Example.tsx

import { useState } from "react";
import { Drawer, Button } from "@compa11y/react";

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Drawer</Button>

      <Drawer open={open} onOpenChange={setOpen} side="right">
        <Drawer.Title>Settings</Drawer.Title>
        <Drawer.Description>
          Manage your account settings and preferences.
        </Drawer.Description>
        <Drawer.Actions>
          <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
          <Button onClick={() => setOpen(false)}>Save</Button>
        </Drawer.Actions>
      </Drawer>
    </>
  );
}

Features

Slides from left, right, top, or bottom
Focus trapping within the drawer
Focus restoration on close
Escape key to close
Click outside to close
Portal rendering to document body
Compound component API
Respects prefers-reduced-motion

Props

Drawer component props
Prop	Type	Default	Description
`open`*	`boolean`	-	Controls drawer visibility
`onOpenChange`*	`(open: boolean) => void`	-	Called when open state changes
`side`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'right'`	Edge the drawer slides in from
`aria-label`	`string`	-	Accessible label (alternative to Drawer.Title)
`children`*	`ReactNode`	-	Drawer content

Sub-components

Drawer.Title

Drawer.Title props
Prop	Type	Default	Description
`children`*	`ReactNode`	-	Title text

Drawer.Description

Drawer.Description props
Prop	Type	Default	Description
`children`*	`ReactNode`	-	Description text

Drawer.Close

Drawer.Close props
Prop	Type	Default	Description
`children`	`ReactNode`	-	Close button content

Drawer.Actions

Drawer.Actions props
Prop	Type	Default	Description
`children`*	`ReactNode`	-	Action buttons

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for Drawer
Key	Action
`Tab`	Moves focus between focusable elements within the drawer
`Shift+Tab`	Moves focus backwards
`Escape`	Closes the drawer