Glass Dialog

Component

About

A modal dialog with a frosted liquid-glass surface, springy open/close motion, header/footer slots and an optional close button.

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

Code

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

Usage.tsx

"use client";

import {
  GlassDialog,
  GlassDialogClose,
  GlassDialogContent,
  GlassDialogDescription,
  GlassDialogFooter,
  GlassDialogHeader,
  GlassDialogTitle,
  GlassDialogTrigger,
} from "@/components/ui/glass-dialog";

export default function GlassDialogDemo() {
  return (
    <div className="flex min-h-[480px] w-full items-center justify-center bg-background p-10 text-foreground">
      <GlassDialog>
        <GlassDialogTrigger className="rounded-full bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground shadow-sm transition-opacity outline-none hover:opacity-90">
          Open dialog
        </GlassDialogTrigger>
        <GlassDialogContent>
          <GlassDialogHeader>
            <GlassDialogTitle>Save changes?</GlassDialogTitle>
            <GlassDialogDescription>
              Your edits will be lost if you don&apos;t save them before
              closing.
            </GlassDialogDescription>
          </GlassDialogHeader>
          <GlassDialogFooter>
            <GlassDialogClose className="rounded-full px-4 py-2 text-sm font-medium opacity-70 transition-opacity outline-none hover:opacity-100">
              Cancel
            </GlassDialogClose>
            <GlassDialogClose className="rounded-full bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-opacity outline-none hover:opacity-90">
              Save
            </GlassDialogClose>
          </GlassDialogFooter>
        </GlassDialogContent>
      </GlassDialog>
    </div>
  );
}