ui modal / components

ui modal

UiModal packages the shared Base UI dialog primitives into a controlled modal surface for React flows. It portals the backdrop and viewport, centers the popup when content fits, falls back to scrollable layout for taller content, and exposes a small width preset plus popupClassName for local layout adjustments.

field	value
group	global
import	`@arieare/ds`
source	`packages/ds/src/components/ui/modal.tsx` `packages/ds/src/ui.css`

Open a live modal preview with the shared centered dialog layout.

component tokens

token	source	description
`--ui-surface-overlay`	@arieare/ds/tokens.css	Backdrop tint applied behind the dialog viewport.
`--ui-surface-base / --rds-surface`	@arieare/ds/tokens.css	Popup fill and shared surface radius for the centered modal container.
`--ui-field-label-ink`	@arieare/ds/tokens.css	Muted supporting ink used by optional dialog description copy.

props

prop	type	default	description
`open / onOpenChange`	boolean / (open) => void	—	Controlled open state for the dialog.
`title / description`	ReactNode	—	Dialog heading and optional supporting copy rendered above the body.
`size`	"md" \| "lg"	"md"	Selects the popup width preset.
`popupClassName`	string	—	Extra class names merged onto the popup surface element.
`children`	ReactNode	—	Modal body content rendered after the title and optional description.