React Modal - Flowbite

The modal component can be used as an interactive dialog on top of the main content area of the website to show notifications and gather information using form elements from your website users.

Get started with multiple sizes, colors, and styles built with the utility classes from Tailwind CSS and the components from Flowbite.

<Button onClick={onClick}>
  Toggle modal
</Button>
<Modal
  onClose={onClose}
>
  <Modal.Header>
    Terms of Service
  </Modal.Header>
  <Modal.Body>
    <div className="space-y-6">
      <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
        With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
      </p>
      <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
        The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
      </p>
    </div>
  </Modal.Body>
  <Modal.Footer>
    <Button onClick={onClick}>
      I accept
    </Button>
    <Button
      color="gray"
      onClick={onClick}
    >
      Decline
    </Button>
  </Modal.Footer>
</Modal>

<Button onClick={onClick}>
  Toggle modal
</Button>
<Modal
  dismissible
  onClose={onClose}
>
  <Modal.Header>
    Terms of Service
  </Modal.Header>
  <Modal.Body>
    <div className="space-y-6">
      <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
        With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
      </p>
      <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
        The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
      </p>
    </div>
  </Modal.Body>
  <Modal.Footer>
    <Button onClick={onClick}>
      I accept
    </Button>
    <Button
      color="gray"
      onClick={onClick}
    >
      Decline
    </Button>
  </Modal.Footer>
</Modal>

<Button onClick={onClick}>
  Toggle modal
</Button>
<Modal
  onClose={onClose}
  popup
  size="md"
>
  <Modal.Header />
  <Modal.Body>
    <div className="text-center">
      <HiOutlineExclamationCircle className="mx-auto mb-4 h-14 w-14 text-gray-400 dark:text-gray-200" />
      <h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
        Are you sure you want to delete this product?
      </h3>
      <div className="flex justify-center gap-4">
        <Button
          color="failure"
          onClick={onClick}
        >
          Yes, I'm sure
        </Button>
        <Button
          color="gray"
          onClick={onClick}
        >
          No, cancel
        </Button>
      </div>
    </div>
  </Modal.Body>
</Modal>

<Button onClick={onClick}>
  Toggle modal
</Button>
<Modal
  onClose={onClose}
  popup
  size="md"
>
  <Modal.Header />
  <Modal.Body>
    <div className="space-y-6 px-6 pb-4 sm:pb-6 lg:px-8 xl:pb-8">
      <h3 className="text-xl font-medium text-gray-900 dark:text-white">
        Sign in to our platform
      </h3>
      <div>
        <div className="mb-2 block">
          <Label
            htmlFor="email"
            value="Your email"
          />
        </div>
        <TextInput
          id="email"
          placeholder="name@company.com"
          required
        />
      </div>
      <div>
        <div className="mb-2 block">
          <Label
            htmlFor="password"
            value="Your password"
          />
        </div>
        <TextInput
          id="password"
          required
          type="password"
        />
      </div>
      <div className="flex justify-between">
        <div className="flex items-center gap-2">
          <Checkbox id="remember" />
          <Label htmlFor="remember">
            Remember me
          </Label>
        </div>
        <LinkComponent
          className="text-sm text-cyan-700 hover:underline dark:text-cyan-500"
          href="/modal"
        >
          Lost Password?
        </LinkComponent>
      </div>
      <div className="w-full">
        <Button>
          Log in to your account
        </Button>
      </div>
      <div className="text-sm font-medium text-gray-500 dark:text-gray-300">
        Not registered? 
        <LinkComponent
          className="text-cyan-700 hover:underline dark:text-cyan-500"
          href="/modal"
        >
          Create account
        </LinkComponent>
      </div>
    </div>
  </Modal.Body>
</Modal>

<div className="flex flex-wrap gap-4">
  <div className="w-40">
    <Select
      defaultValue="md"
      onChange={onChange}
    >
      <option value="sm">
        sm
      </option>
      <option value="md">
        md
      </option>
      <option value="lg">
        lg
      </option>
      <option value="xl">
        xl
      </option>
      <option value="2xl">
        2xl
      </option>
      <option value="3xl">
        3xl
      </option>
      <option value="4xl">
        4xl
      </option>
      <option value="5xl">
        5xl
      </option>
      <option value="6xl">
        6xl
      </option>
      <option value="7xl">
        7xl
      </option>
    </Select>
  </div>
  <Button onClick={onClick}>
    Toggle modal
  </Button>
</div>
<Modal
  onClose={onClose}
  size="md"
>
  <Modal.Header>
    Small modal
  </Modal.Header>
  <Modal.Body>
    <div className="space-y-6 p-6">
      <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
        With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
      </p>
      <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
        The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
      </p>
    </div>
  </Modal.Body>
  <Modal.Footer>
    <Button onClick={onClick}>
      I accept
    </Button>
    <Button
      color="gray"
      onClick={onClick}
    >
      Decline
    </Button>
  </Modal.Footer>
</Modal>

<div className="flex flex-wrap gap-4">
  <div className="w-40">
    <Select
      defaultValue="center"
      onChange={onChange}
    >
      <option value="center">
        Center
      </option>
      <option value="top-left">
        Top left
      </option>
      <option value="top-center">
        Top center
      </option>
      <option value="top-right">
        Top right
      </option>
      <option value="center-left">
        Center left
      </option>
      <option value="center-right">
        Center right
      </option>
      <option value="bottom-right">
        Bottom right
      </option>
      <option value="bottom-center">
        Bottom center
      </option>
      <option value="bottom-left">
        Bottom left
      </option>
    </Select>
  </div>
  <Button onClick={onClick}>
    Toggle modal
  </Button>
</div>
<Modal
  onClose={onClose}
  position="center"
>
  <Modal.Header>
    Small modal
  </Modal.Header>
  <Modal.Body>
    <div className="space-y-6 p-6">
      <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
        With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
      </p>
      <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
        The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
      </p>
    </div>
  </Modal.Body>
  <Modal.Footer>
    <Button onClick={onClick}>
      I accept
    </Button>
    <Button
      color="gray"
      onClick={onClick}
    >
      Decline
    </Button>
  </Modal.Footer>
</Modal>