Modal

Buttons 12

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

          <Modal.Modal active={open5} onClickOutside={() => setOpen5(false)}>
            <Modal.Body>
              <Modal.Header>
                <Modal.Title>Modal</Modal.Title>
                <Modal.Subtitle>This is a modal.</Modal.Subtitle>
              </Modal.Header>

              <Modal.Inset>
                <div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">Content within the inset.</div>
              </Modal.Inset>

              <div className="pt-6">
                <div className="font-sans text-sm text-[#171717] dark:text-[#ededed]">Content outside the inset.</div>
              </div>
            </Modal.Body>

            <Modal.Actions>
              <Modal.Action onClick={() => setOpen5(false)} type="secondary">
                Cancel
              </Modal.Action>

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