Modal

Modal root: anchor id, open/close behavior, animation, and (in editor) remaining props pass through to Container.

Required Props: idSupports Children: any

Structure

All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.

Properties

Property	Type	Description	Examples
`anchor`	string	Hidden anchor id; must match Button/Text click.value to open Default: `"my-modal"`	-
`view`	string \| preview	Editor: use preview to simulate viewer overlay	-
`trigger`	object	Auto-open behavior on published site	-
`closeOnBackdrop`	boolean	Click outside panel closes modal Default: `true`	-
`closeOnEscape`	boolean	Escape key closes modal Default: `true`	-
`showCloseButton`	boolean	- Default: `true`	-
`closeButtonPosition`	string top-right \| top-left	- Default: `"top-right"`	-
`modalAnimation`	string fade \| slide-up \| slide-down \| scale \| none	- Default: `"fade"`	-
`modalWidth`	string	Tailwind max-width class on dialog panel Default: `"max-w-lg"`	-
`modalPosition`	string center \| top \| bottom	- Default: `"center"`	-
`backdropBlur`	boolean	Backdrop blur in viewer Default: `false`	-
`canDelete`	boolean	- Default: `true`	-
`canEditName`	boolean	- Default: `true`	-
`custom`	object	-	-
`className`	string	Tailwind utility classes string. Mobile-first: unprefixed = base, md: = 768px+, sm: = 640px+, lg: = 1024px+. Includes layout, spacing, surface design, and typography.	`flex flex-col gap-space-sm py-space-lg px-container-x md:flex-rowbg-primary text-primary-content rounded-box py-3.5 px-6 font-semibold`
`type`	string	Editor wraps children in Container with type container	-
`root`	object	Editor-only container chrome around children	-