drawer/introduction

Quick Demo

Here's how the component is structured:

    <Drawer>
      <DrawerHeading>
        <DrawerTitle/>
        <DrawerSubtitle/>
      </DrawerHeading>
      {/* Content */}
    </Drawer>
  

TL;DR: This component works just like our Dialog. The main difference? Drawer uses vaul(built on @radix-ui/react-dialog) while our Dialog uses HeadlessUI's Dialog.

🔑 Key thing to remember: When using <Drawer/>, props go straight to vaul's Root. You'll need to handle the open state yourself with open and onOpenChange props - no auto-management here! Here's a real-world example (switch to mobile view and hit the "more" icon):

Q&A