Skip to main contentSkip to sidebarSkip to headerSkip to footer

Drawer

A panel that slides in from the side, typically for navigation or actions.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
2
3
4
5
6
7
8
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerFooter,
  DrawerTrigger,
} from "passport-ui";
import { Button } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <div className="mx-auto w-full max-w-md section-container">
      <div className="meta-container">
        <h3>Drawer component</h3>
        <p>
          Add your content here. Use Drawer to confirm actions, and this
          looks better in mobile layouts.
        </p>
      </div>
      <DrawerFooter>
        <Button>Submit</Button>
        <DrawerClose asChild>
          <Button variant="primary">Close</Button>
        </DrawerClose>
      </DrawerFooter>
    </div>
  </DrawerContent>
</Drawer>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗