UI·loomora/Dialog
Dialog
A dialog primitive driven by open/show state and setter callbacks, with optional portal rendering and placement controls.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { Dialog } from 'loomora'
<Dialog open={open} setOpen={setOpen} show={show} setShow={setShow}>
<div className="p-6">Dialog content</div>
</Dialog>API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | required | Whether the dialog is interactive/open. |
| setOpen | (open: boolean) => void | required | Updates the open state. |
| show | boolean | required | Controls whether the dialog is mounted/shown for its transition. |
| setShow | (show: boolean) => void | required | Updates the show state. |
| position | 'center' | 'top' | 'bottom' | 'start' | 'end' | 'center' | Dialog placement. |
| usePortal | boolean | true | Renders into a portal when enabled. |