Modal

Component 8

About

Display popup content that requires attention or provides additional information.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Modal to your project and fits it to your theme.

Code

How Modal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useState } from "react";
import { Button } from "@/components/ui/button-1";
import { Modal } from "@/components/ui/modal";

export default function SingleButtonDemo() {
  const [open3, setOpen3] = useState(false);
  return (
        <div>
          <Button onClick={() => setOpen3(true)} size="small">
            Open Modal
          </Button>

          <Modal.Modal active={open3} onClickOutside={() => setOpen3(false)} sticky>
            <Modal.Body>
              <Modal.Header>
                <Modal.Title>Create Token</Modal.Title>
              </Modal.Header>
              <div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">
                Some content contained within the modal.
              </div>
            </Modal.Body>
            <Modal.Actions>
              <Modal.Action fullWidth onClick={() => setOpen3(false)}>
                Cancel
              </Modal.Action>
            </Modal.Actions>
          </Modal.Modal>
        </div>
  );
}