Docs
Drawer

Drawer

Drawer component is a versatile and user-friendly component for React that provides a convenient way to present additional content or options, sliding in from the side of the screen. It is commonly used for navigation menus, settings panels, or any supplementary information that can be revealed without taking up the entire screen. The Drawer component enhances the user experience by offering a seamless and visually appealing way to access secondary content while maintaining the focus on the primary interface.

NPM

About

Drawer is built on top of Vaul by emilkowalski_.

Installation

yarn add drawer

Usage

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@camped-ui/drawer";
<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Examples

Responsive Dialog

You can combine the Dialog and Drawer components to create a responsive dialog. This renders a Dialog component on desktop and a Drawer on mobile.

DialogDropdown Menu