Modal

Buttons 14

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 DisabledActionsDemo() {
  const [open4, setOpen4] = useState(false);
  return (
        <div>
          <Button onClick={() => setOpen4(true)} size="small">
            Open Modal
          </Button>

          <Modal.Modal active={open4} onClickOutside={() => setOpen4(false)}>
            <Modal.Body>
              <Modal.Header>
                <Modal.Title>Modal</Modal.Title>
                <Modal.Subtitle>This is a modal.</Modal.Subtitle>
              </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 onClick={() => setOpen4(false)} type="secondary">
                Cancel
              </Modal.Action>

              <Modal.Action disabled onClick={() => setOpen4(false)}>
                Submit
              </Modal.Action>
            </Modal.Actions>
          </Modal.Modal>
        </div>
  );
}