Add a Dashboard Modal Extension in Studio Two

A dashboard modal is a pop-up window you open from dashboard pages or menu plugins.

Follow the instructions below to:

  1. Add a dashboard modal to your site project.
  2. Customize the modal.
  3. Check the modal.
  4. Publish your site with the modal.

Note: You can also ask Aria, Wix's AI assistant, to create and customize the extension.

Step 1 | Add a dashboard modal

To add a dashboard modal:

  1. In the Studio Two editor, open the Code tab.

  2. In the VS Code sidebar, open the Wix Extension Builder.

    the Wix Extension Builder in the VS Code activity bar

  3. Under Create an Extension, choose Dashboard, then Dashboard Modal.

  4. In Modal Title, enter the title shown on the modal.

  5. Click Generate.

Generate names the modal folder after the title, in lowercase with hyphens.

You can find the new files under src/extensions/dashboard/modals/<modal-folder>/. The modal is registered in your project's extensions.ts and listed under My Extensions. For what each file is for, see Dashboard Modal Extension Files and Code.

Step 2 | Customize your dashboard modal

You can edit the generated files to match the look and behavior you need. When you're happy with the modal, move on to the next step.

For the full workflow, from writing the modal UI to opening it from a dashboard page, see Build a Dashboard Modal in Studio Two.

For example, to update the modal text:

  1. Open <modal-folder>.tsx.
  2. Change the Text content inside the modal from "Wix CLI Modal" to "Hello world!".
  3. Save the file.

When you open the modal, the text shows Hello world!.

Step 3 | Check the modal

A dashboard modal isn't opened on its own. It's triggered from other dashboard code, such as a dashboard page, using the @wix/dashboard SDK's openModal method, or from a dashboard menu plugin using its Open Modal action.

To check the modal:

  1. In a dashboard extension's code, import dashboard from @wix/dashboard.

  2. Add a button that calls dashboard.openModal('<modal-id>'), where <modal-id> is the id value from <modal-folder>.extension.ts. For example:

    Copy

  3. Click the button in the dashboard. Your modal opens with the text you set in Step 2.

Step 4 | Publish your site

When you're ready, click Publish in the Studio Two editor to ship the extension with your site.

See also

Last updated: 2 November 2026

Did this help?