Drawer

Display overlay area at any side of the screen.

'use client';

import { Drawer } from 'rizzui/drawer';

Default

The default style of the Drawer component.

'use client';

import { useState } from 'react';
import { Drawer } from 'rizzui/drawer';
import { Button } from 'rizzui/button';

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.

'use client';

import { useState } from 'react';
import { Drawer } from 'rizzui/drawer';
import { Button } from 'rizzui/button';
import { Text } from 'rizzui/typography';

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: '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.

'use client';

import { useState } from 'react';
import { Drawer } from 'rizzui/drawer';
import { Button } from 'rizzui/button';
import { Text } from 'rizzui/typography';

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.

'use client';

import { useState } from 'react';
import { Drawer } from 'rizzui/drawer';
import { Button } from 'rizzui/button';

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}
        enableResizer={true}
      >
        <div className="py-4 px-5">Custom Size = 600px</div>
      </Drawer>
    </>
  );
}

With Custom Style

You can do custom style to Drawer.

'use client';

import { useState } from 'react';
import { Drawer } from 'rizzui/drawer';
import { Button } from 'rizzui/button';

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.

'use client';

import { useState } from 'react';
import { XMarkIcon } from '@heroicons/react/20/solid';
import { ShoppingBagIcon } from '@heroicons/react/24/outline';
import { Drawer } from 'rizzui/drawer';
import { Button } from 'rizzui/button';
import { Badge } from 'rizzui/badge';
import { ActionIcon } from 'rizzui/action-icon';
import { Text } from 'rizzui/typography';
import { Empty } from 'rizzui/empty';
import { EmptyProductBoxIcon } from 'rizzui/empty';

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' | '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​