Dialog

Modal with trapped focus, a restored return point, four positions and a choice of backdrops.

Source: 1 file
Dependencies: framer-motion
Playground: no

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

01Form

<Dialog open onClose><form>…</form></Dialog>

02Confirm

<Dialog variant="destructive | success | warning" showCloseButton={false} />

03Sizes

04Position

<Dialog position="top-left | top-center | … | bottom-right" />

05Animation

<Dialog animation="zoom | fade | slide-up | flip | …" duration={240} />

06Backdrop

<Dialog backdrop="blur | dim | clean | opaque" />

07Scrollable

<Dialog> {longContent} </Dialog> — inner area scrolls, page stays locked

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { Dialog } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

framer-motion

Usage

dialog-example.tsx

import { Dialog } from "kipui";

<Dialog
  open={open}
  onClose={() => setOpen(false)}
  title="Delete project"
  description="This removes the project and everything in it."
  footer={<Button variant="destructive" onClick={remove}>Delete</Button>}
/>

Focus is trapped while open and returned to whatever opened it on close — you don't wire that up yourself.
`initialFocus` points at the element that should receive focus first; default is the panel.
Turning off both `closeOnEsc` and `closeOnBackdropClick` leaves the close button as the only exit — make sure it's visible.

API reference

Transcribed from the component's own types. Props with no default are required.

Prop	Default	Description
openboolean	required	Controlled open state.
onClose() => void	required	Fires on Esc, backdrop click and the close button.
size"sm" \| "md" \| "lg" \| "xl" \| "full"	"md"	Panel width.
position"center" \| "top" \| "bottom" \| "left" \| "right"	"center"	Where the panel sits in the viewport.
backdrop"blur" \| "dim" \| "none"	"dim"	Treatment behind the panel.
animation"fade" \| "zoom" \| "slide"	"zoom"	Enter and exit motion.
closeOnEscboolean	true	Esc dismisses.
closeOnBackdropClickboolean	true	Clicking outside dismisses.
showCloseButtonboolean	true	Corner close button.
preventScrollboolean	true	Locks body scroll while open.
initialFocusRefObject<HTMLElement>	required	Element focused on open.
titleReactNode	required	Heading in the panel, wired to `aria-labelledby`.
descriptionReactNode	required	Line under the title, wired to `aria-describedby`.
footerReactNode	required	Actions row along the bottom of the panel.
variant"default" \| "destructive" \| "warning" \| "success"	"default"	Colour of the title and its icon.
durationnumber	200	Enter and exit duration in ms. Drives both the transition and the unmount.
zIndexnumber	3000	Stacking order of the overlay and panel.
overlayClassNamestring	required	Classes for the backdrop.
contentClassNamestring	required	Classes for the padded wrapper inside the panel.