Components
Dialog
A modal dialog using the native browser dialog element with a rough-drawn border that redraws fresh on every open.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/dialog.jsonProps
PropTypeDefaultDescription
children*ReactNode—
Content rendered inside the component.
onOpenChange(open: boolean) => void—
Callback fired when the open state changes.
open*boolean—
Controlled open state.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
Notes
Dialog uses the native <dialog> element. The browser handles the backdrop, focus trap, and Escape key. The rough border redraws with a fresh seed every time the dialog opens — each appearance has a unique wobble.
Accessibility
Dialog should be used for short, interruptive tasks rather than long document layouts. When you control open, make sure your surrounding app returns focus to the triggering control after close.
Examples
import { useState } from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
} from "@/components/crumble/ui/dialog";
import { Button } from "@/components/crumble/ui/button";
function Demo() {
const [open, setOpen] = useState(false);
return (
<>
<Button onClick={() => setOpen(true)}>Open dialog</Button>
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent open={open}>
<DialogHeader>
<DialogTitle>Confirm action</DialogTitle>
<DialogDescription>This cannot be undone.</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="ghost" onClick={() => setOpen(false)}>
Cancel
</Button>
<Button onClick={() => setOpen(false)}>Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
);
}