A dashboard modal is a React component plus a configuration file. You generate the files first, then spend most of your time in the .tsx file: layout with the Wix Design System, Dashboard SDK calls, and reads and writes of site data.
This article walks through that loop from a scaffolded modal to a modal you can open from a dashboard page.
Follow the instructions below to:
Start from a generated dashboard modal rather than an empty folder, so the file structure and registration are already in place.
For the full procedure, see Add a Dashboard Modal Extension in Studio Two.
You can find the new files under src/extensions/dashboard/modals/<modal-folder>/. You spend most of this article in <modal-folder>.tsx. For what every file in the folder is for, see Dashboard Modal Extension Files and Code.
<modal-folder>.extension.ts is the configuration file you own. It declares the modal ID, title, size, and path to the React component. Title, width, and height come from <modal-folder>.config.ts.
Keep the modal ID stable once other code depends on it. Dashboard pages, menu plugins, and openModal() all use this value as the target modal ID.
Change title, width, and height in the shared config when you want a different title or size.
For every field, see Dashboard Modal Extension Files and Code.
Write the modal in <modal-folder>.tsx as a React component. Prefer the Wix Design System so the modal matches native Wix dashboard screens.
A generated modal typically wraps its content in WixDesignSystemProvider and CustomModalLayout:
Replace the Text content with forms, confirmations, or other short workflows as the modal's job becomes clear. Keep CustomModalLayout so the chrome stays aligned with other dashboard modals.
To receive custom data passed into the modal, call observeState().
A modal doesn't appear in dashboard navigation on its own. Open it from a dashboard page, a menu plugin, or another dashboard surface with openModal(). Pass the modal ID from the configuration file.
Inside the modal, call closeModal() from the primary and secondary actions, as in the generated layout above. You can pass data back to the opener when the modal closes. For the full contract, including parameters and the close result, see openModal() and closeModal().
To add the calling page first, see Add a Dashboard Page Extension in Studio Two.
When the modal behaves the way you want, click Publish to ship it with your site.
Last updated: 2 November 2026