Dialog

Component 3

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 Dialog 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 DialogDemo() {
  const [open, setOpen] = useState(false);
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center">
      <button style={triggerStyle} onClick={() => setOpen(true)}>
        Dialog
      </button>
      <Dialog open={open} onClose={() => setOpen(false)} title="Confirm credit">
        Issue a $180 credit to Acme for the outage? This posts to Stripe and
        cannot be undone.
      </Dialog>
    </div>
  );
}