---
sidebar_position: 38
---

import Paper from "@site/src/components/paper";
import ModalDefault, {
  ModalSizes,
  ModalRounded,
  ModalCustomSize,
  ModalCustomStyle,
} from "@site/src/components/modal";

# Modal

A fully-managed renderless Modal component. When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use Modal to create a new floating layer over the current page to get user feedback or display information.

```tsx
import { Modal } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

A simple sigun up modal example.

<Paper>
  <ModalDefault />
</Paper>

```tsx
import { useState } from "react";
import {
  Modal,
  Button,
  Text,
  ActionIcon,
  Input,
  Password,
  Checkbox,
} from "rizzui";
import { XMarkIcon } from "@heroicons/react/20/solid";

export default function App() {
  const [modalState, setModalState] = useState(false);
  return (
    <>
      <Button onClick={() => setModalState(true)}>Open Modal</Button>
      <Modal isOpen={modalState} onClose={() => setModalState(false)}>
        <div className="m-auto px-7 pt-6 pb-8">
          <div className="mb-7 flex items-center justify-between">
            <Text as="h3">Welcome to RizzUi</Text>
            <ActionIcon
              size="sm"
              variant="text"
              onClick={() => setModalState(false)}
            >
              <XMarkIcon className="h-auto w-6" strokeWidth={1.8} />
            </ActionIcon>
          </div>
          <div className="grid grid-cols-2 gap-y-6 gap-x-5 [&_label>span]:font-medium">
            <Input label="First Name *" inputClassName="border-2" size="lg" />
            <Input label="Last Name *" inputClassName="border-2" size="lg" />
            <Input
              label="Email *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Password
              label="Password *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Password
              label="Confirm Password *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Checkbox
              size="lg"
              inputClassName="border-2"
              className="col-span-2"
              label={
                <Text className="text-sm">
                  I agree to RizzUI&lsquo;s{" "}
                  <a className="underline">Terms of Service</a> and{" "}
                  <a className="underline">Privacy Policy</a>
                </Text>
              }
            />
            <Button
              type="submit"
              size="lg"
              className="col-span-2 mt-2"
              onClick={() => setModalState(false)}
            >
              Create an Account
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
}
```

<div className="mb-16" />

## Sizes

You can change the size of **Modal** using [**size**](#modal-sizes) property.

<Paper className="block">
  <ModalSizes />
</Paper>

```tsx
import { useState } from "react";
import {
  Modal,
  Button,
  Text,
  ActionIcon,
  Input,
  Password,
  Checkbox,
} from "rizzui";
import { XMarkIcon } from "@heroicons/react/20/solid";

export default function App() {
  const [modalState, setModalState] = useState({
    isOpen: false,
    size: "md",
  });
  return (
    <>
      <div className="flex items-center justify-around gap-2 flex-wrap">
        <Button
          variant="outline"
          onClick={() =>
            setModalState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "sm",
            }))
          }
        >
          sm
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setModalState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "md",
            }))
          }
        >
          Default
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setModalState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "lg",
            }))
          }
        >
          lg
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setModalState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "xl",
            }))
          }
        >
          xl
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setModalState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "full",
            }))
          }
        >
          full
        </Button>
      </div>
      <Modal
        isOpen={modalState.isOpen}
        size={modalState.size}
        onClose={() =>
          setModalState((prevState) => ({ ...prevState, isOpen: false }))
        }
      >
        <div className="m-auto px-7 pt-6 pb-8">
          <div className="mb-7 flex items-center justify-between">
            <Text as="h3">Welcome to RizzUI</Text>
            <ActionIcon
              size="sm"
              variant="text"
              onClick={() =>
                setModalState((prevState) => ({ ...prevState, isOpen: false }))
              }
            >
              <XMarkIcon className="h-auto w-6" strokeWidth={1.8} />
            </ActionIcon>
          </div>
          <div className="grid grid-cols-2 gap-y-6 gap-x-5 [&_label>span]:font-medium">
            <Input label="First Name *" inputClassName="border-2" size="lg" />
            <Input label="Last Name *" inputClassName="border-2" size="lg" />
            <Input
              label="Email *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Password
              label="Password *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Password
              label="Confirm Password *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Checkbox
              size="lg"
              inputClassName="border-2"
              className="col-span-2"
              label={
                <Text className="text-sm">
                  I agree to RizzUI&lsquo;s{" "}
                  <a className="underline">Terms of Service</a> and{" "}
                  <a className="underline">Privacy Policy</a>
                </Text>
              }
            />
            <Button
              type="submit"
              size="lg"
              className="col-span-2 mt-2"
              onClick={() =>
                setModalState((prevState) => ({ ...prevState, isOpen: false }))
              }
            >
              Create an Account
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
}
```

<div className="mb-16" />

## Rounded

You can change rounded corner style of **Modal** using [**rounded**](#modal-rounded) property.

<Paper className="block">
  <ModalRounded />
</Paper>

```tsx
import { useState } from "react";
import {
  Modal,
  Button,
  Text,
  ActionIcon,
  Input,
  Password,
  Checkbox,
} from "rizzui";
import { XMarkIcon } from "@heroicons/react/20/solid";

export default function App() {
  const [modalState, setModalState] = useState({
    isOpen: false,
    rounded: "md",
  });
  return (
    <>
      <div className="flex items-center justify-around gap-2 flex-wrap">
        <Button
          variant="outline"
          onClick={() =>
            setModalState((prevState) => ({
              ...prevState,
              isOpen: true,
              rounded: "none",
            }))
          }
        >
          None
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setModalState((prevState) => ({
              ...prevState,
              isOpen: true,
              rounded: "sm",
            }))
          }
        >
          sm
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setModalState((prevState) => ({
              ...prevState,
              isOpen: true,
              rounded: "md",
            }))
          }
        >
          Default
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setModalState((prevState) => ({
              ...prevState,
              isOpen: true,
              rounded: "lg",
            }))
          }
        >
          lg
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setModalState((prevState) => ({
              ...prevState,
              isOpen: true,
              rounded: "xl",
            }))
          }
        >
          xl
        </Button>
      </div>
      <Modal
        isOpen={modalState.isOpen}
        rounded={modalState.rounded}
        onClose={() =>
          setModalState((prevState) => ({ ...prevState, isOpen: false }))
        }
      >
        <div className="m-auto px-7 pt-6 pb-8">
          <div className="mb-7 flex items-center justify-between">
            <Text as="h3">Welcome to RizzUI</Text>
            <ActionIcon
              size="sm"
              variant="text"
              onClick={() =>
                setModalState((prevState) => ({ ...prevState, isOpen: false }))
              }
            >
              <XMarkIcon className="h-auto w-6" strokeWidth={1.8} />
            </ActionIcon>
          </div>
          <div className="grid grid-cols-2 gap-y-6 gap-x-5 [&_label>span]:font-medium">
            <Input label="First Name *" inputClassName="border-2" size="lg" />
            <Input label="Last Name *" inputClassName="border-2" size="lg" />
            <Input
              label="Email *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Password
              label="Password *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Password
              label="Confirm Password *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Checkbox
              size="lg"
              inputClassName="border-2"
              className="col-span-2"
              label={
                <Text className="text-sm">
                  I agree to RizzUI&lsquo;s{" "}
                  <a className="underline">Terms of Service</a> and{" "}
                  <a className="underline">Privacy Policy</a>
                </Text>
              }
            />
            <Button
              type="submit"
              size="lg"
              className="col-span-2 mt-2"
              onClick={() =>
                setModalState((prevState) => ({ ...prevState, isOpen: false }))
              }
            >
              Create an Account
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
}
```

<div className="mb-16" />

## With Custom Size

You can use change the **Modal** size style using **customSize** property.

<Paper>
  <ModalCustomSize />
</Paper>

```tsx
import { useState } from "react";
import {
  Modal,
  Button,
  Text,
  ActionIcon,
  Input,
  Password,
  Checkbox,
} from "rizzui";
import { XMarkIcon } from "@heroicons/react/20/solid";

export default function App() {
  const [modalState, setModalState] = useState(false);
  return (
    <>
      <Button onClick={() => setModalState(true)}>Custom Size Modal</Button>
      <Modal
        isOpen={modalState}
        onClose={() => setModalState(false)}
        customSize="1080px"
      >
        <div className="m-auto px-7 pt-6 pb-8">
          <div className="mb-7 flex items-center justify-between">
            <Text as="h3">Welcome to RizzUI</Text>
            <ActionIcon
              size="sm"
              variant="text"
              onClick={() => setModalState(false)}
            >
              <XMarkIcon className="h-auto w-6" strokeWidth={1.8} />
            </ActionIcon>
          </div>
          <div className="grid grid-cols-2 gap-y-6 gap-x-5 [&_label>span]:font-medium">
            <Input label="First Name *" inputClassName="border-2" size="lg" />
            <Input label="Last Name *" inputClassName="border-2" size="lg" />
            <Input
              label="Email *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Password
              label="Password *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Password
              label="Confirm Password *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Checkbox
              size="lg"
              inputClassName="border-2"
              className="col-span-2"
              label={
                <Text className="text-sm">
                  I agree to RizzUI&lsquo;s{" "}
                  <a className="underline">Terms of Service</a> and{" "}
                  <a className="underline">Privacy Policy</a>
                </Text>
              }
            />
            <Button
              type="submit"
              size="lg"
              className="col-span-2 mt-2"
              onClick={() => setModalState(false)}
            >
              Create an Account
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
}
```

<div className="mb-16" />

## With Custom Style

The customization options are limitless, You can customize as per your preference.

<Paper>
  <ModalCustomStyle />
</Paper>

```tsx
import { useState } from "react";
import {
  Modal,
  Button,
  Text,
  ActionIcon,
  Input,
  Password,
  Checkbox,
} from "rizzui";
import { XMarkIcon } from "@heroicons/react/20/solid";

export default function App() {
  const [modalState, setModalState] = useState(false);
  return (
    <>
      <Button onClick={() => setModalState(true)}>Custom Style Modal</Button>
      <Modal
        isOpen={modalState}
        onClose={() => setModalState(false)}
        overlayClassName="backdrop-blur"
        containerClassName="!max-w-4xl !shadow-2xl"
      >
        <div className="m-auto px-7 pt-6 pb-8">
          <div className="mb-7 flex items-center justify-between">
            <Text as="h3">Welcome to RizzUI</Text>
            <ActionIcon
              size="sm"
              variant="text"
              onClick={() => setModalState(false)}
            >
              <XMarkIcon className="h-auto w-6" strokeWidth={1.8} />
            </ActionIcon>
          </div>
          <div className="grid grid-cols-2 gap-y-6 gap-x-5 [&_label>span]:font-medium">
            <Input label="First Name *" inputClassName="border-2" size="lg" />
            <Input label="Last Name *" inputClassName="border-2" size="lg" />
            <Input
              label="Email *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Password
              label="Password *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Password
              label="Confirm Password *"
              inputClassName="border-2"
              size="lg"
              className="col-span-2"
            />
            <Checkbox
              size="lg"
              inputClassName="border-2"
              className="col-span-2"
              label={
                <Text className="text-sm">
                  I agree to RizzUI&lsquo;s{" "}
                  <a className="underline">Terms of Service</a> and{" "}
                  <a className="underline">Privacy Policy</a>
                </Text>
              }
            />
            <Button
              type="submit"
              size="lg"
              className="col-span-2 mt-2"
              onClick={() => setModalState(false)}
            >
              Create an Account
            </Button>
          </div>
        </div>
      </Modal>
    </>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Modal Props

Here is the API documentation of the Modal component.

<div className="overflow-x-auto">

|       Props        |              Type              |                                                                 Description                                                                  | Default |
| :----------------: | :----------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------: | :-----: |
|       isOpen       |           `boolean`            |                                                       Whether the Modal is open or not                                                       |  \_\_   |
|      onClose       |          `() => void`          |                               Called when modal is closed (Escape key and click outside, depending on options)                               |  \_\_   |
|        size        |   [ModalSizes](#modal-sizes)   |                                                 Preset size of modal is sm, md, lg, xl, full                                                 | `"md"`  |
|      rounded       | [ModalRounded](#modal-rounded) |                                                          The rounded variants are:                                                           | `"md"`  |
|     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%" |  \_\_   |
|      noGutter      |           `boolean`            |                                           This prop will remove extra padding spacing from screen                                            |  \_\_   |
|  overlayClassName  |            `string`            |                                                Override default CSS style of Modal's overlay                                                 |  \_\_   |
| containerClassName |            `string`            |            Set custom style classes for the Modal container, where you can set custom Modal size and padding and background color            |  \_\_   |
|     className      |            `string`            |                                             Set custom style classes for the Modal root element                                              |  \_\_   |

</div>

<div className="mb-10" />

### Modal Sizes

```ts
type ModalSizes = "sm" | "md" | "lg" | "xl" | "full";
```

<div className="mb-10" />

### Modal Rounded

```ts
type ModalRounded = "sm" | "md" | "lg" | "xl" | "none";
```
