Drawer

Component Foundation: Vaul

This Drawer component leverages the elegant and performant Vaul library, created by Emil Kowalski. Vaul provides the core functionality for the sliding panel interaction, particularly optimized for touch devices.

Installation Procedure

npx shadcn@latest add drawer

Implementing the Drawer Component

  Drawer, // The main container component managing the drawer's state.
  DrawerClose, // A button component specifically designed to close the drawer.
  DrawerContent, // The sliding panel that contains the drawer's content.
  DrawerDescription, // Component for providing accessible descriptive text for the drawer.
  DrawerFooter, // Optional container for placing actions at the bottom of the drawer.
  DrawerHeader, // Optional container for the title and description at the top.
  DrawerTitle, // Component for the main title within the drawer header.
  DrawerTrigger, // Wraps the element (e.g., a button) that opens the drawer on interaction.
} from "@/components/ui/drawer"; // Adjust import path as necessary.

// Basic structure: Wrap the trigger and content within the main Drawer component.
<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <div className="mx-auto w-full max-w-sm">
      <DrawerHeader>
        <DrawerTitle>Move Goal</DrawerTitle>
        <DrawerDescription>Set your daily activity goal.</DrawerDescription>
      </DrawerHeader>
      <div className="p-4 pb-0">
        <p>Your drawer content goes here...</p>
      </div>
      <DrawerFooter>
        <Button>Submit</Button>
        <DrawerClose asChild>
          <Button variant="outline">Cancel</Button>
        </DrawerClose>
      </DrawerFooter>
    </div>
  </DrawerContent>
</Drawer>

The structure mirrors the Dialog component: a <DrawerTrigger> opens the <DrawerContent>. Components like <DrawerHeader>, <DrawerTitle>, <DrawerDescription>, and <DrawerFooter> help organize the content within the sliding panel. <DrawerClose> provides a convenient way to add a closing button. The underlying Vaul library handles the smooth sliding animation and interaction.

Drawer Component Examples

Combining Drawer and Dialog for Responsiveness

A common pattern is to create a responsive modal experience. By using media queries (either via CSS or a hook like useMediaQuery), you can conditionally render a <Dialog> component on larger screens (desktop) and automatically switch to a <Drawer> component on smaller screens (mobile). This provides an optimal user experience across different device types.