Modal

Buttons 3

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 { useRef,                                        useState } from "react";
import { Button } from "@/components/ui/button-1";
import { Modal } from "@/components/ui/modal";

export default function ControlInitialFocusDemo() {
  const [open6, setOpen6] = useState(false);
  const initialFocusRef = useRef<HTMLButtonElement>(null);
  return (
        <div>
          <Button onClick={() => setOpen6(true)} size="small">
            Open Modal
          </Button>

          <Modal.Modal
            active={open6}
            initialFocusRef={initialFocusRef}
            onClickOutside={() => setOpen6(false)}
          >
            <Modal.Body>
              <Modal.Header>
                <Modal.Title>Initial Focus</Modal.Title>
                <Modal.Subtitle>
                  This Modal.Modal is set up to programmatically move the focus onto the
                  Submit button, making it possible to promptly continue with the
                  Enter key.
                </Modal.Subtitle>
              </Modal.Header>
            </Modal.Body>

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

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