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 and Resize Handler

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
        customSize={384}
        enableResizer={true}
        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={600}
      >
        <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.

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	`number`	Size prop will not work when you are using customSize prop. Here is the example of using this prop -> customSize=500	__
enableResizer	`boolean`	customSize is required if enableResizer is set to true, It will enable the resize handler for drawer	__
resizerClassName	`string`	Set custom style classes for Drawer resize handler	__
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";

Default​

Sizes​

With Placement and Resize Handler​

With Custom Size​

With Custom Style​

With Shopping Cart​

API Reference​

Drawer Props​

Drawer Sizes​

Drawer Placements​