Drawer Component With Headless-UI

Beauty is an expression

In this tutorial I am going to show you exactly how to build a drawer component using headless-ui. We will utilize the modal component to build the drawer.

Installing Dependencies

You will need to have headless-ui and tailwindcss installed to build the component. I have listed the commands below. For further instructions check out the official install pages headless-ui modal, tailwindcss.

$> npm install @headlessui/react

$> npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Setting Up The Modal Component

We start by importing Dialog from @headlessui/react and creating a simple modal that will appear in the upper left corner of the screen.

/Components/Drawer/index.tsx
01import { Dialog } from "@headlessui/react";
02import Button from "@app/components/Button";
03
04type DrawerProps = {
05  title?: string;
06  description?: string;
07  children: React.ReactNode;
08  isOpen: boolean;
09  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
10};
11
12export default function Drawer({
13  title = '',
14  description = '',
15  children,
16  isOpen,
17  setIsOpen,
18}: DrawerProps) {
19  return (
20    <Dialog
21      unmount={false}
22      open={isOpen}
23      onClose={() => setIsOpen(false)}
24      className="fixed z-30 inset-0 overflow-y-auto"
25    >
26      <div className="flex w-3/4 h-screen">
27        <Dialog.Overlay
28          className="z-40 fixed inset-0 bg-black bg-opacity-30"
29        />
30        <div className={`z-50 flex flex-col justify-between bg-gray-500 w-full
31                         max-w-sm p-6 overflow-hidden text-left align-middle
32                         shadow-xl`}>
33          <div>
34            <Dialog.Title
35              className="font-bold text-2xl md:text-4xl text-blue-400"
36            >
37              {title}
38            </Dialog.Title>
39            <Dialog.Description>{description}</Dialog.Description>
40            {children}
41          </div>
42          <div className="self-center mt-10">
43            <Button onClick={() => setIsOpen(!isOpen)}>Close</Button>
44          </div>
45        </div>
46      </div>
47    </Dialog>
48  );
49}
50

Let's go over the code line by line. <Dialog> is the main container for the model. We set unmount={false} for performance reasons. Our modal slides on/off screen and we do not want to mount/unmount it every time it needs to slide in/out. The state of our drawer (open/closed) is going to be handled in the parent component, so we pass isOpen and the function setIsOpen in to the Drawer component. Last we give it a fixed position at inset-0, a z-30 to make sure it always renders above our main content, and overflow-y-auto to make sure that it renders scrollbars if the children take up to much space.

Within the Dialog we have a <div> to keep the width of our drawer to 3/4 of the screen and the height to the entire screen. The <Dialog.Overlay> is the piece which greys out the main content and is at z-40 to place it just above the main Dialog container. It is just a black background with opacity 40.

The content of the drawer is composed of a flexbox in column order with the Dialog.Title and Dialog.Description placed to the left and all other items centered. There is a button at the bottom that can activate the parents setIsOpen function to close the dialog as well.

Setting Up The Parent Component

This is an outline of what setting up the parent component to the drawer looks like. The drawer can be open/closed with the button element of the parent component. With this implementation the drawer is closed whenever a link is clicked as well.

/components/Button/index.tsx
01import { useState } from 'react';
02import Drawer from '@app/components/Drawer';
03import Button from '@app/components/Button';
04
05export default function NavBar() {
06  const [isOpen, setIsOpen] = useState(false);
07  return (
08    <>
09      <Drawer
10        isOpen={isOpen}
11        setIsOpen={setIsOpen}
12        title="Menu"
13        description="Try something new!"
14      >
15        <a href="/" onClick={() => setIsOpen(false)}>
16          Home
17        </a>
18        <a href="/blog" onClick={() => setIsOpen(false)}>
19          Blog
20        </a>
21        <a href="/projects" onClick={() => setIsOpen(false)}>
22          Projects
23        </a>
24        <a href="/contact" onClick={() => setIsOpen(false)}>
25          Contact
26        </a>
27      </Drawer>
28      <Button onClick={() => setIsOpen(!isOpen)}>
29        Menu
30      </Button>
31    </>
32  );
33}
34
35

I have not included all of the nice to haves in this example, it shows you a basic outline for how to connect the logic for triggering the drawer from a parent button/page/navbar etc. In the component that you want to trigger the modal from you will include the <Drawer>. State is maintained with a react useState hook. The drawer is placed into the top of the component and whatever you want to display in it (usually links to other pages) are placed as children within it. The state isOpen and the function that controls it are passed into the Drawer. The button when clicked changed the isOpen state that has been passed into the drawer component.

/components/Button/index.tsx
01export default function RoundedButton({
02  className,
03  children,
04  ...rest
05}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
06  return (
07    <button
08      className={`font-bold py-2 px-4 rounded inline-flex items-center
09                  ${className}`}
10      {...rest}
11    >
12      {children}
13    </button>
14  );
15}
16

This is the button component which is used as the trigger to open/close the drawer. It is simple, customizable, and reusable. I also use it within the Drawer component as another way to close the drawer.

Creating the transition

The final step is to wrap our drawer in a Transition so that our drawer smoothly fly's in and out of the screen.

/components/Drawer/index.tsx
01import { Fragment } from 'react';
02import { Dialog, Transition } from '@headlessui/react';
03import Button from '@components/Button/index.tsx';
04
05type DrawerProps = {
06  title?: string,
07  description?: string,
08  children: React.ReactNode,
09  isOpen: boolean,
10 setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
11}
12
13export default function Drawer({
14  title = '',
15  description = '',
16  children,
17  isOpen,
18  setIsOpen
19}: DrawerProps) {
20  return (
21    <Transition show={isOpen} as={Fragment}>
22      <Dialog
23        unmount={false}
24        onClose={() => setIsOpen(false)}
25        className="fixed z-30 inset-0 overflow-y-auto"
26      >
27        <div className="flex w-3/4 h-screen">
28          <Transition.Child
29            as={Fragment}
30            enter="transition-opacity ease-in duration-300"
31            enterFrom="opacity-0"
32            enterTo="opacity-30"
33            entered="opacity-30"
34            leave="transition-opacity ease-out duration-300"
35            leaveFrom="opacity-30"
36            leaveTo="opacity-0"
37          >
38            <Dialog.Overlay className="z-40 fixed inset-0 bg-black" />
39          </Transition.Child>
40
41          <Transition.Child
42            as={Fragment}
43            enter="transition ease-in-out duration-300 transform"
44            enterFrom="-translate-x-full"
45            enterTo="translate-x-0"
46            leave="transition ease-in-out duration-300 transform"
47            leaveFrom="translate-x-0"
48            leaveTo="-translate-x-full"
49          >
50            <div
51              className={`flex flex-col justify-between bg-gray-500 z-50
52                          w-full max-w-sm p-6 overflow-hidden text-left
53                          align-middle shadow-xl rounded-r-2xl`}>
54                <div>
55                  <Dialog.Title
56                    className="font-bold text-2xl md:text-4xl text-blue-500"
57                  >
58                    {title}
59                  </Dialog.Title>
60                  <Dialog.Description>{description}</Dialog.Description>
61                  {children}
62                </div>
63                <div className="self-center mt-10">
64                  <Button onClick={() => setIsOpen(!isOpen)}>Close</Button>
65                </div>
66            </div>
67          </Transition.Child>
68        </div>
69      </Dialog>
70    </Transition>
71  );
72}
73

Most of this is explained fairly well in headless-ui Transition documentation. However there is one part which is not explained well. You need to use the entered prop on the Transition.Child for the Overlay or else the entire overlay will loose its opacity setting right after the transition and cover the main content in pitch black.

To break this down, we are wrapping our Dialog component in a Transition element. That element is now the one responsible for showing/hiding the Drawer (Dialog/Modal) so we hoise the isOpen prop to Transition. All transition does is add/remove className strings from the className of the main child component that it is wrapped in. In our case there are 2 separate transitions so we use Transition.Child to define each transition separately. We create the Transition and its children as a React Fragment because it isn't an element we want to display, it is just an element used to alter the children that are within it.

The first transition fades the opacity of the Overlay in from 0 to 30 and then back out again depending on the value of isOpen. The second transition slides the drawer component in from the left of the screen to its final resting position (inset-0) and then back out again (also based on the value of isOpen).