Aurora Dialog

Forms

About

An accessible modal dialog with a WAI-ARIA focus trap, Escape-to-close, backdrop dismiss, scroll lock, and focus restore on close, ported to React from the Angular Aurora UI library.

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

Code

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

Usage.tsx

"use client";
import * as React from "react";
import AuDialog from "@/components/ui/aurora-ui-dialog";

const inputStyle: React.CSSProperties = {
  width: "100%",
  minHeight: "2.5rem",
  padding: "0 0.75rem",
  borderRadius: "var(--au-radius)",
  border: "1px solid var(--au-border)",
  background: "var(--au-surface)",
  color: "var(--au-text)",
  font: "inherit",
  boxSizing: "border-box",
};

const primaryButtonStyle: React.CSSProperties = {
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  minHeight: "2.5rem",
  padding: "0 1rem",
  border: "1px solid var(--au-accent)",
  borderRadius: "var(--au-radius)",
  background: "var(--au-accent)",
  color: "var(--au-accent-contrast)",
  font: "600 0.925rem/1 var(--au-font)",
  cursor: "pointer",
};

const secondaryButtonStyle: React.CSSProperties = {
  ...primaryButtonStyle,
  border: "1px solid var(--au-border-strong)",
  background: "var(--au-surface)",
  color: "var(--au-text)",
};

export default function DialogDemo() {
  const [open, setOpen] = React.useState(false);
  const [email, setEmail] = React.useState("");

  return (
    <div
      className="flex items-center justify-center w-full h-screen"
      style={{ background: "var(--au-bg)", color: "var(--au-text)" }}
    >
      <button
        type="button"
        style={primaryButtonStyle}
        onClick={() => setOpen(true)}
      >
        Invite a teammate
      </button>

      <AuDialog
        title="Invite a teammate"
        description="They will get an email with a link."
        open={open}
        onOpenChange={setOpen}
        onClosed={(reason) => console.log("closed:", reason)}
        footer={
          <>
            <button
              type="button"
              style={secondaryButtonStyle}
              onClick={() => setOpen(false)}
            >
              Cancel
            </button>
            <button
              type="button"
              style={primaryButtonStyle}
              onClick={() => setOpen(false)}
            >
              Send invite
            </button>
          </>
        }
      >
        <label
          style={{
            display: "block",
            fontSize: "0.85rem",
            marginBottom: "0.35rem",
            color: "var(--au-muted)",
          }}
        >
          Email
        </label>
        <input
          type="email"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
          style={inputStyle}
        />
      </AuDialog>
    </div>
  );
}