Drawer

A bottom sheet drawer built on Vaul. Supports drag-to-dismiss, scale-background effect, and snapping. Ideal for mobile-first interactions.

Built on Radix UI.

✓Drag handle with smooth dismiss gesture
✓shouldScaleBackground scales the page content behind it
✓Portal-rendered — never clipped by overflow parents
✓Works on desktop and mobile

import { Drawer }from "@aetherstack/ui"

drawer.tsx

import {
  Drawer, DrawerContent, DrawerDescription, DrawerFooter,
  DrawerHeader, DrawerTitle, DrawerTrigger,
} from "@aetherstack/ui"

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Title</DrawerTitle>
      <DrawerDescription>Description</DrawerDescription>
    </DrawerHeader>
    <div className="p-4">{/* content */}</div>
    <DrawerFooter>
      <Button>Submit</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Usage

Without scale background

Disable the scale effect by setting shouldScaleBackground={false}.

Props

Prop	Type	Default	Description
shouldScaleBackground	boolean	true	Scales and rounds the page behind the drawer when open.
open	boolean	—	Controlled open state.
onOpenChange	(open: boolean) => void	—	Callback when open state changes.
snapPoints	(number \| string)[]	—	Snap points for partial drawer heights, e.g. [0.5, 1].

* Required props

Accessibility

→DrawerContent renders with role="dialog" and focus is trapped inside while open.
→DrawerTitle and DrawerDescription provide accessible label and description.
→Drag-to-dismiss is supplemented by a close button for keyboard and pointer users.
→Escape key closes the drawer.