Drawer

Animation Selection

Use animation="natural" as the default for professional interfaces. animation="snappy" works well for productivity apps where speed matters. animation="rubber-band" and animation="bounce" suit playful or consumer-facing UIs. Reserve animation="gentle" for calm, minimal interfaces where subtlety is preferred.

Content & Layout

Keep drawer content focused on a single task. Use DrawerHeader for title and description, and DrawerFooter for action buttons. Bottom drawers should not exceed 80vh to ensure the user can see the page behind. For forms, place the primary action on the right in the footer.

Responsive Behavior

Drawers are inherently mobile-friendly with built-in swipe-to-dismiss. On mobile, prefer direction="bottom" for natural thumb-reachable placement. Horizontal drawers (left/right) constrain to w-3/4 on mobile and sm:max-w-sm on larger screens.

Color & Contrast

The drawer uses bg-background for the content panel and bg-black/50 for the overlay, providing clear separation from the page. The drag handle uses bg-muted for subtle visibility. All text within the drawer follows the standard text-foreground / text-muted-foreground hierarchy for WCAG 2.1 AA compliance.

Keyboard Navigation

• Tab — Move focus between interactive elements inside the drawer
• Escape — Close the drawer and return focus to the trigger
• Enter or Space — Activate the trigger button to open the drawer

Focus Management

Focus is trapped within the drawer when open, preventing interaction with background content. When the drawer opens, focus moves to the first focusable element inside the drawer content. On close, focus returns to the element that triggered the drawer (the DrawerTrigger).

Screen Reader Support

• Built on Vaul (Radix Dialog primitives), providing full ARIA dialog semantics
• DrawerTitle is required and announces the drawer purpose via aria-labelledby
• DrawerDescription provides supplemental context via aria-describedby
• Background content is hidden from assistive technology when the drawer is open

Touch & Gesture Support

Swipe gestures allow dismissing the drawer on touch devices. The drag handle (bottom drawers) provides a clear affordance for swiping. Animations respect the prefers-reduced-motion media query, reducing or disabling motion for users who prefer it.

ARIA Attributes

{/* Standard drawer with descriptive title */}
<Drawer>
  <DrawerTrigger asChild>
    <Button>Edit Profile</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Edit Profile</DrawerTitle>
      <DrawerDescription>
        Update your name and preferences.
      </DrawerDescription>
    </DrawerHeader>
    {/* Form content */}
  </DrawerContent>
</Drawer>

{/* Drawer with aria-describedby for extra context */}
<Drawer>
  <DrawerTrigger asChild>
    <Button variant="destructive">Delete Account</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Confirm Deletion</DrawerTitle>
      <DrawerDescription id="delete-desc">
        This action is permanent and cannot be undone.
      </DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button variant="destructive" aria-describedby="delete-desc">
        Delete permanently
      </Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>