dialog

available

modal dialog with backdrop and ascii borders

usage

import Dialog from "@/registry/ascii/dialog";

const [open, setOpen] = useState(false);

<Dialog onClose={() => setOpen(false)} title="dialog title">
  your content here
</Dialog>

examples

basic dialog

sizes

with footer

no title

props

prop

type

default

children

ReactNode

onClose

() => void

title

string

undefined

footer

ReactNode

undefined

size

"sm" | "md" | "lg" | "xl"

"md"

className

string

design notes

• press esc to close any dialog
• backdrop has blur effect for visual depth without breaking tui aesthetic
• close button uses bracket notation [x]
• optional footer for action buttons
• content area scrolls if needed