Modal

Buttons 13

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

          <Modal.Modal active={open1} onClickOutside={() => setOpen1(false)}>
            <Modal.Body>
              <Modal.Header>
                <Modal.Title>Create Token</Modal.Title>
                <Modal.Subtitle>
                  Enter a unique name for your token to differentiate it from other
                  tokens and then select the scope.
                </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={() => setOpen1(false)} type="secondary">
                Cancel
              </Modal.Action>

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