Drawer

Display overlay area at any side of the screen.

import { Drawer } from "rizzui";

Default

The default style of the Drawer component.

import { useState } from "react";
import { Drawer, Button } from "rizzui";

export default function App() {
  const [drawerState, setDrawerState] = useState(false);
  return (
    <>
      <Button onClick={() => setDrawerState(true)}>Open Drawer</Button>
      <Drawer isOpen={drawerState} onClose={() => setDrawerState(false)}>
        <div className="py-4 px-5">Default Drawer</div>
      </Drawer>
    </>
  );
}

Sizes

You can set size of the Drawer.

import { useState } from "react";
import { Drawer, Button, Text } from "rizzui";

export default function App() {
  const [drawerSate, setDrawerState] = useState({
    isOpen: false,
    size: "md",
  });
  return (
    <>
      <div className="flex items-center justify-around gap-2 flex-wrap">
        <Button
          variant="outline"
          onClick={() =>
            setDrawerState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "sm",
            }))
          }
        >
          sm
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setDrawerState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "md",
            }))
          }
        >
          Default
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setDrawerState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "lg",
            }))
          }
        >
          lg
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setDrawerState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "xl",
            }))
          }
        >
          xl
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setDrawerState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "full",
            }))
          }
        >
          full
        </Button>
      </div>
      <Drawer
        isOpen={drawerSate.isOpen}
        size={drawerSate.size}
        onClose={() =>
          setDrawerState((prevState) => ({ ...prevState, isOpen: false }))
        }
      >
        <div className="py-4 px-5">
          This is{" "}
          <Text as="strong">
            &quot;
            {drawerSate.size}
            &quot;
          </Text>{" "}
          size Drawer
        </div>
      </Drawer>
    </>
  );
}

With Placement

You can set placement of the Drawer.

import { useState } from "react";
import { Drawer, Button, Text } from "rizzui";

export default function App() {
  const [drawerSate, setDrawerState] = useState({
    isOpen: false,
    placement: "left",
  });
  return (
    <>
      <div className="relative py-5">
        <div className="flex h-72 flex-col items-center justify-between">
          <Button
            variant="outline"
            onClick={() =>
              setDrawerState((prevState) => ({
                ...prevState,
                isOpen: true,
                placement: "top",
              }))
            }
          >
            Top Drawer
          </Button>
          <Button
            variant="outline"
            onClick={() =>
              setDrawerState((prevState) => ({
                ...prevState,
                isOpen: true,
                placement: "bottom",
              }))
            }
          >
            Bottom Drawer
          </Button>
        </div>
        <div className="absolute top-1/2 flex w-full -translate-y-1/2 transform items-center justify-around">
          <Button
            variant="outline"
            onClick={() =>
              setDrawerState((prevState) => ({
                ...prevState,
                isOpen: true,
                placement: "left",
              }))
            }
          >
            Left Drawer
          </Button>
          <Button
            variant="outline"
            onClick={() =>
              setDrawerState((prevState) => ({
                ...prevState,
                isOpen: true,
                placement: "right",
              }))
            }
          >
            Right Drawer
          </Button>
        </div>
      </div>
      <Drawer
        isOpen={drawerSate.isOpen}
        placement={drawerSate.placement}
        onClose={() =>
          setDrawerState((prevState) => ({ ...prevState, isOpen: false }))
        }
      >
        <div className="py-4 px-5">
          The drawer placement on the{" "}
          <Text as="strong">
            &quot;
            {drawerSate.placement}
            &quot;
          </Text>
        </div>
      </Drawer>
    </>
  );
}

With Custom Size

You can set custom size of the Drawer.

import { useState } from "react";
import { Drawer, Button } from "rizzui";

export default function App() {
  const [drawerState, setDrawerState] = useState(false);
  return (
    <>
      <Button onClick={() => setDrawerState(true)}>Custom Size Drawer</Button>
      <Drawer
        isOpen={drawerState}
        onClose={() => setDrawerState(false)}
        customSize="600px"
      >
        <div className="py-4 px-5">Custom Size = 600px</div>
      </Drawer>
    </>
  );
}

With Custom Style

You can do custom style to Drawer.

import { useState } from "react";
import { Drawer, Button } from "rizzui";

export default function App() {
  const [drawerState, setDrawerState] = useState(false);
  return (
    <>
      <Button onClick={() => setDrawerState(true)}>Custom Style Drawer</Button>
      <Drawer
        isOpen={drawerState}
        onClose={() => setDrawerState(false)}
        overlayClassName="backdrop-blur"
        containerClassName="!max-w-[calc(100%-480px)] !shadow-2xl"
      >
        <div className="py-4 px-5">Custom Style</div>
      </Drawer>
    </>
  );
}

With Shopping Cart

You can render any thing you want. Here is an empty shpping cart drawer example.

0

import { useState } from "react";
import { XMarkIcon } from "@heroicons/react/20/solid";
import { ShoppingBagIcon } from "@heroicons/react/24/outline";
import {
  Drawer,
  Button,
  Badge,
  ActionIcon,
  Text,
  Empty,
  EmptyProductBoxIcon,
} from "rizzui";

export default function App() {
  const [drawerState, setDrawerState] = useState(false);
  return (
    <>
      <div
        role="button"
        tabIndex={0}
        onClick={() => setDrawerState(true)}
        className="relative inline-flex cursor-pointer"
      >
        <ShoppingBagIcon className="h-auto w-8" strokeWidth={1.2} />
        <Badge
          size="sm"
          enableOutlineRing
          className="absolute right-1 top-0.5 -translate-y-1/3 translate-x-1/2"
        >
          0
        </Badge>
      </div>
      <Drawer isOpen={drawerState} onClose={() => setDrawerState(false)}>
        <div className="flex min-h-full flex-col py-4 px-5">
          <header className="flex items-center justify-between">
            <Text as="h4">Shopping Cart</Text>
            <ActionIcon
              size="sm"
              variant="outline"
              onClick={() => setDrawerState(false)}
            >
              <XMarkIcon className="h-auto w-5" strokeWidth={1.5} />
            </ActionIcon>
          </header>
          {/* End of drawer header */}
          <div className="flex flex-grow flex-col items-center justify-center">
            <Empty
              image={<EmptyProductBoxIcon />}
              text="No Product Available"
              textClassName="mt-1 text-gray-500"
            />
          </div>
          {/* End of drawer body */}
          <Button size="lg" className="sticky bottom-0 z-10">
            Proceed to Checkout
          </Button>
          {/* End of drawer footer */}
        </div>
      </Drawer>
    </>
  );
}

API Reference

---

Drawer Props

Here is the API documentation of the Drawer component.

Props	Type	Description	Default
isOpen	boolean	Whether the Drawer is open or not	__
onClose	() => void	Called when drawer is closed (Escape key and click outside, depending on options)	__
size	DrawerSizes	Preset size of drawer is sm, md, lg, xl, full	"md"
placement	DrawerPlacements	Drawer can be placed on left (default), top, right and bottom. Control drawer position with placement prop:	"right"
customSize	string	Size prop will not work when you are using customSize prop. Here is the example of using this prop -> customSize="500px" or customSize="90%"	__
overlayClassName	string	Override default CSS style of Drawer's overlay	__
containerClassName	string	Set custom style classes for the Drawer container, where you can set custom Drawer size and padding and background color	__
className	string	Set custom style classes for the Drawer root element	__

Drawer Sizes

type DrawerSizes = "sm" | "md" | "lg" | "xl" | "full";

Drawer Placements

type DrawerPlacements = "left" | "right" | "top" | "bottom";