Dialog

Forms 2

About

A centered modal overlay for confirmations, with form and cover-image card variants, that traps focus and closes on Escape or an outside click.

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

Code

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

Usage.tsx

"use client";

import { FormDialog } from "@/components/ui/halaska-dialog";
import { useState } from "react";

const triggerStyle: React.CSSProperties = {
  height: 30,
  padding: "0 12px",
  borderRadius: 16,
  border: "1.5px solid rgba(0,0,0,0.06)",
  background: "transparent",
  color: "#3d3d3d",
  fontSize: 12,
  fontWeight: 500,
  fontFamily: "system-ui, sans-serif",
  cursor: "pointer",
};

export default function FormDialogDemo() {
  const [open, setOpen] = useState(false);
  const [formName, setFormName] = useState("");
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center">
      <button style={triggerStyle} onClick={() => setOpen(true)}>
        Form
      </button>
      <FormDialog
        open={open}
        onClose={() => setOpen(false)}
        title="Create workflow"
        description="Name your workflow and set a refund cap."
        onSubmit={() => {}}
      >
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <label style={{ fontSize: 12, fontWeight: 500, color: "#888888" }}>
            Workflow name
          </label>
          <input
            value={formName}
            onChange={(e) => setFormName(e.target.value)}
            placeholder="Refund triage"
            style={{
              height: 38,
              padding: "0 16px",
              borderRadius: 16,
              border: "1.5px solid transparent",
              background: "#f0f0f0",
              fontSize: 13,
              outline: "none",
            }}
          />
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <label style={{ fontSize: 12, fontWeight: 500, color: "#888888" }}>
            Refund cap (USD)
          </label>
          <input
            placeholder="2,500"
            style={{
              height: 38,
              padding: "0 16px",
              borderRadius: 16,
              border: "1.5px solid transparent",
              background: "#f0f0f0",
              fontSize: 13,
              outline: "none",
            }}
          />
        </div>
      </FormDialog>
    </div>
  );
}