Sketch Dialog

Component

About

A composable modal dialog with a hand-drawn, sketchy rough.js border and animated draw-in, built on Radix UI for triggers, headers, titles, descriptions, and footers.

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

Code

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

Usage.tsx

"use client";

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

export default function DialogDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center bg-background p-10 text-foreground">
      <Dialog seed={42} defaultOpen>
        <DialogTrigger asChild>
          <Button seed={42}>Open dialog</Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Confirm action</DialogTitle>
            <DialogDescription>This will save your changes.</DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose asChild>
              <Button seed={43} variant="outline">
                Close
              </Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}