Overlays@knitui/components

Dialog

Dialog is a floating corner panel pinned to a viewport edge via Affix — no overlay scrim. It mirrors Mantine's Dialog. Use opened to control visibility, position to choose the corner, and size to set the content width. Accent color follows the active theme prop.

WebiOSAndroid2 style slots12 own props9 examples

Stories Source Tests Open in Storybook

import { Dialog } from "@knitui/components";

Playground

Loading playground…

opened

true

sizeContent width — xxs through xxl, plus custom number or CSS width.

shadowElevation — drop shadow from the shared ladder.

withCloseButton

true

withBorder

true

keepMountedKeep mounted in the DOM while closed (toggles display instead of unmounting).

false

withinPortal

false

zIndex

children

Playground

<Dialog
  opened
  size="md"
  withCloseButton
  withBorder
  keepMounted={false}
  withinPortal={false}
  zIndex={300}
  position={{ bottom: "$xl", right: "$xl" }}
>
  This is a dialog message.
</Dialog>

Examples

Sizes

All seven content widths stacked to compare the size presets.

Loading example…

SizesSource Storybook

Shadows

All five shadow levels stacked to compare elevation. Each always-open panel is offset vertically (and rendered with withinPortal={false}) so the drop shadows sit side by side without overlapping. The dialog defaults to shadow="md".

Loading example…

ShadowsSource Storybook

Trigger

Controlled open/close via a trigger button — demonstrates the opened + onClose pattern.

Loading example…

TriggerSource Storybook

Without Close Button

Close button hidden — useful when dismissal is handled via action buttons inside the dialog.

Loading example…

Without Close ButtonSource Storybook

Keep Mounted

keepMounted keeps the node in the DOM while closed — only display is toggled.

Loading example…

Keep MountedSource Storybook

Corner Positions

Pinned to each viewport corner to verify position prop behaviour.

Loading example…

Corner PositionsSource Storybook

Styles

Per-slot styles targets individual parts — here the content frame and the closeButton.

Loading example…

StylesSource Storybook

With Actions

Rich content — title, body copy, and action buttons showing a realistic use-case.

Loading example…

With ActionsSource Storybook

Props

Prop	Type	Default	Description
`opened` required	`boolean`	`true`	Opened state.
`animation`	`false \| MotionPresetName \| MotionPreset \| undefined`	a subtle rise-in fade. Reduced motion is always honoured (collapses to instant). Exit animates unless `keepMounted`.	Enter/exit animation — a motion preset name, an inline {@link MotionPreset}, or `false` to disable.
`children`	`ReactNode`	`This is a dialog message.`	Dialog content.
`closeButtonProps`	`CloseButtonProps \| undefined`	—
`disabled` system	`boolean \| undefined`	—
`duration`	`number \| undefined`	—	Animation speed in ms — overrides the preset's duration while keeping its easing. Ignored when `animation` is `false` or reduced motion is on.
`keepMounted`	`boolean \| undefined`	`false`	Keep mounted in the DOM while closed (toggles display instead of unmounting).
`onClose`	`(() => void) \| undefined`	—	Called when the close button is pressed.
`position`	`AffixPosition \| undefined`	`{ bottom: "$xl", right: "$xl" }`	Viewport corner to pin to.
`radius` system	`string \| number \| undefined`	—
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` unset · xs · sm · md · lg · xl	—	Elevation — drop shadow from the shared ladder.
`size` system	`string \| number \| undefined` xxs · xs · sm · md · lg · xl · xxl	`"md"`	Content width — xxs through xxl, plus custom number or CSS width.
`styles` system	`SlotStyles<DialogStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`withBorder`	`boolean \| undefined`	`true`	Show the outline border.
`withCloseButton`	`boolean \| undefined`	`true`	Show the close button (top-inline-end).
`withinPortal`	`boolean \| undefined`	`true`	Render inside a `Portal`.
`zIndex`	`number \| undefined`	`300`	Root `z-index`.

Style slots

Every part of Dialog can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`closeButton`	`styles={{ closeButton: { … } }}`
`content`	`styles={{ content: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 495 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.