Drawer

Use a drawer for a short, touch-friendly task that benefits from a bottom surface on small screens. It is a good fit for quick notes, actions and compact forms.

Add job noteSwipe or press Escape to dismiss.

Show codeCopy

Import

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@workshop1/ui/components/drawer"

Anatomy

DrawerContent uses Vaul for drag-aware interactions. Give it a DrawerHeader and accessible title, then put actions in DrawerFooter. Use DrawerClose for a secondary cancel action.

<Drawer>
  <DrawerTrigger asChild><Button>Add note</Button></DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>...</DrawerHeader>
    <DrawerFooter>...</DrawerFooter>
  </DrawerContent>
</Drawer>

Behaviour

• The bottom drawer exposes a drag handle on touch layouts and can be dismissed with Escape or the overlay.
• Disable the primary action until required input is valid, as in the example.
• Use a sheet when the task needs a persistent side panel or larger desktop workspace.

Accessibility

Always provide DrawerTitle and describe the task when its purpose is not obvious. The trigger and close controls must remain real buttons so keyboard focus can enter and return correctly.

Best practices

• Keep touch targets clear and actions close to the bottom edge.
• Avoid long forms in a drag-dismissable surface.
• Choose one drawer direction for a task and keep it consistent.