Drawer

Touch-first bottom sheet (Vaul).

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from "@aspyn-io/kit";

Bottom drawer

Built on Vaul — swipe-to-dismiss and background scaling on touch. Use Drawer on mobile where Dialog would feel cramped.

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Confirm appointment</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Confirm appointment</DrawerTitle>
      <DrawerDescription>Tomorrow, 10:00–12:30 · 1717 Round Lake Rd</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Confirm</Button>
      <DrawerClose asChild>
        <Button variant="ghost">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Notes

Responsive pattern: Dialog on desktop, Drawer on mobile — switch on a media query.
Sheet slides from screen edges for desktop side panels; Drawer is the touch-first bottom sheet.