Drawer

Import

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from "@timelycare/helix-ui"

Props

interface DrawerProps {
  open?: boolean
  onOpenChange?: (open: boolean) => void
  shouldScaleBackground?: boolean
  children: React.ReactNode
}

interface DrawerContentProps {
  className?: string
  children: React.ReactNode
}

Design Tokens

Drawer Content

Handle/Indicator

Drawer Header

Typography

Drawer Footer

Buttons

Increment Buttons (Statistic)

Statistic Value

Backdrop

Breakpoints

Responsive Behavior

• Drawer slides up from bottom on all screen sizes
• On mobile (sm), takes full width with small margins, header text centers
• On desktop (md), centered with max-width constraint, header text left-aligned

Content Variants

States

Increment Button States

Common Patterns

Statistic Drawer

<Drawer>
  <DrawerTrigger asChild>
    <Button>Set Goal</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Move Goal</DrawerTitle>
      <DrawerDescription>Set your daily activity goal.</DrawerDescription>
    </DrawerHeader>
    <div className="flex items-center justify-center gap-4 py-4">
      <Button variant="outline" size="icon" onClick={decrement}>
        <Minus className="h-4 w-4" />
      </Button>
      <span className="text-7xl font-bold">{goal}</span>
      <Button variant="outline" size="icon" onClick={increment}>
        <Plus className="h-4 w-4" />
      </Button>
    </div>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Form Drawer

<DrawerContent>
  <DrawerHeader>
    <DrawerTitle>Edit profile</DrawerTitle>
    <DrawerDescription>Make changes to your profile here.</DrawerDescription>
  </DrawerHeader>
  <div className="space-y-4 px-4">
    <Input placeholder="Name" />
    <Input placeholder="Username" />
  </div>
  <DrawerFooter>
    <Button>Save changes</Button>
    <DrawerClose asChild>
      <Button variant="outline">Cancel</Button>
    </DrawerClose>
  </DrawerFooter>
</DrawerContent>

Accessibility

• Built on Vaul — handles focus trap automatically
• Focus trapped within drawer when open
• Keyboard: Escape to close, Tab/Shift+Tab to cycle focus
• Screen reader: announces as modal dialog
• Swipe gesture to dismiss on mobile — always provide a close button as alternative

Gotchas

See Also

• Related Components: Sheet (side panel), Dialog (centered overlay)
• Accessibility: Dialog Accessibility — Focus trap and modal patterns
• Patterns: Component Match

Last updated: February 9, 2026