Skip to main content
Drawer component preview (light)
  • Location: sabo/src/components/ui/drawer.tsx

​
When to use

  • Show contextual panels without leaving the page.
  • Use for mobile nav, filters, details, or quick actions.

​
Usage

import { Drawer, DrawerTrigger, DrawerContent, DrawerClose } from "@/components/ui/drawer";

export function Example() {
  return (
    <Drawer>
      <DrawerTrigger className="rounded-md border px-3 py-1.5">Open</DrawerTrigger>
      <DrawerContent>
        <div className="p-4">Drawer content</div>
        <div className="p-4">
          <DrawerClose className="rounded-md border px-3 py-1.5">Close</DrawerClose>
        </div>
      </DrawerContent>
    </Drawer>
  );
}

​
Key props

​
DrawerContent
Main panel container. Direction and animations are handled by Vaul; content styling via Tailwind.
​
DrawerTrigger
Click target to open the drawer.
​
DrawerClose
Click target to close the drawer.
​
DrawerOverlay
Backdrop overlay behind the drawer.
​
DrawerPortal
Portal root for overlay/content.
​
DrawerHeader/DrawerFooter
Header/footer container sections inside content.
​
DrawerTitle/DrawerDescription
Title and description text wrappers.
This component forwards all props from vaul Drawer primitives (Root/Trigger/Content/Close, etc.). Above are commonly used props. For the full API, see the vaul docs: https://vaul.emilkowal.ski/

​
Styling tip

Add padding inside DrawerContent and maintain visible focus states. 
<DrawerContent className="p-4">...</DrawerContent>

​
Accessibility

  • Drawer traps focus inside when open; escape key dismisses it.
  • Ensure the trigger has a descriptive label; use aria-label if needed.