Dialog
@sushindustries/uiA native dialog driven by props: top layer, focus trap and Escape from the element, click-outside from here.
Dialog is a native <dialog> driven entirely by props: open shows it modal,
and onClose fires from Escape, the backdrop, or its own close button. Reach
for it to hold a reader until they answer something, like a confirmation -
not for a menu meant to be dismissed in passing.
tanstacktanstack add https://adamjurek.com/r/tanstack/dialog.json
shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/dialog.jsonWhy it is built this way
showModal already supplies the top layer, focus trap, Escape and the
backdrop, so this component adds only what is missing: the frame, the title
the dialog is labelled by, and click-outside. Command Palette is this same
recipe with a filter bolted on, and the two stay separate components because
a dialog's job is to hold the page, and a palette's is to let you leave it
quickly.
Install
tanstack add https://adamjurek.com/r/tanstack/dialog.jsonpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/dialog.jsonpnpm add @sushindustries/ui @sushindustries/atomsWhat you get
| Version | 0.1.0 |
| Category | layout · Overlays |
| Files | dialog.tsx |
| Dependencies | None |
| Also installs | iconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content |
| Tags | modal, no-deps |
No runtime dependencies
It brings nothing with it beyond the stylesheet.