> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Add Dashboard Modal Extensions

## Article: Add Dashboard Modal Extensions with the Wix CLI

## Article Link: https://dev.wix.com/docs/wix-cli/guides/extensions/dashboard-extensions/dashboard-modals/add-dashboard-modal-extensions.md

## Article Content:

# Add Dashboard Modal Extensions with the Wix CLI

[Dashboard modal extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-modals/about-dashboard-modals.md) allow you to add modals to site dashboards. For headless projects, modals appear in your site's dashboard. For app projects, modals appear in your users' site's dashboard. You can control the modal using `openModal()` and `closeModal()` from the [Dashboard SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard/open-modal.md). 

Follow the instructions below to:

1. Create a dashboard modal extension for your project.
1. Customize and test your dashboard modal extension.

<blockquote class="tip">

**Tip:** Learn how to interact with the Wix dashboard using the [Wix Dashboard SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md).

</blockquote>

## Step 1 | Create the extension 

1. Run the [generate](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/generate.md) command and follow the prompts to create a dashboard modal extension.

1. Enter a name for your modal's folder. The CLI will create this directory with the chosen name containing your modal's files.

1. Enter the name of your modal. For app projects, this name will be used to refer to your modal in your app's dashboard. 

Upon completion, the extension files will be created in your project directory with the following structure:

```bash
src
└── extensions
    └── dashboard
        └── modals
            └── <your-modal-folder-name>
                ├── <your-modal-name>.config.ts
                ├── <your-modal-name>.extension.ts
                └── <your-modal-name>.tsx

```

> **Note:** This is the default folder structure created by the CLI. You can move these files to any location within the `src/` folder and update the references in your `extension.ts` file. Learn more about the [flexible file system](https://dev.wix.com/docs/wix-cli/guides/get-started/project-structure.md#your-custom-extension-folder).

For more on the files and their structure, see [Dashboard Modal Extensions Files and Code](https://dev.wix.com/docs/wix-cli/guides/extensions/dashboard-extensions/dashboard-modals/dashboard-modal-extensions-files-and-code.md).

## Step 2 | Customize your modal

1. Run the [dev](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/dev.md) command to open the dev menu.
    
1. Choose a dashboard page to display. This will open a browser window previewing the dashboard page.

1. Add code to your dashboard page that triggers your modal to open. Use `openModal()` from the [Dashboard SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard/open-modal.md). 
You can find your modal's ID in your `.extension.ts` file.

1. Edit your `.tsx` file to customize the modal itself. For example, change the text inside `<Text>` to `My Dashboard Modal`:

    ```tsx
    const Modal: FC = () => {
      return (
        <WixDesignSystemProvider features={{ newColorsBranding: true }}>
          <CustomModalLayout
            width={width}
            maxHeight={height}
            primaryButtonText="Save"
            secondaryButtonText="Cancel"
            primaryButtonOnClick={() => dashboard.closeModal()}
            secondaryButtonOnClick={() => dashboard.closeModal()}
            title={title}
            subtitle="Edit this file to customize your modal"
            content={
              <Box direction="vertical" align="center">
                <Text>Wix CLI Modal</Text>
              </Box>
            }
          />
        </WixDesignSystemProvider>
      );
    };

    export default Modal;
    ``` 

1. Set your dashboard modal extension to interact with custom data passed by the `openModal()` method or any data passed from the dashboard page hosting a menu plugin that navigates to your modal. 
    1. To retrieve the data, call the [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md) method. 

        ```js
        dashboard.observeState((componentParams) => {
          console.log("componentParams:", componentParams);
        });
        ```

    1. Use React to add code and logic to your modal. 
    
1. Save your files.

1. Go back to your dashboard page, open your modal, and see your changes.
 
## Build and deploy your project

Once your project is ready for production, you can [build and deploy](https://dev.wix.com/docs/wix-cli/guides/development/build-and-deploy-a-project.md) it.

>**Note:**
> When you release an app project, you release a new version of the app allowing you to publish the app to the [Wix App Market](https://www.wix.com/app-market) or install it on a site with a direct install URL. You can view [your app's versions](https://manage.wix.com/app-selector?title=Select+an+App&primaryButtonText=Select+Site&actionUrl=https%3A%2F%2Fdev.wix.com%2Fapps%2F%7BappId%7D%2Fversions-app) in the app dashboard.

## Delete a dashboard modal

To delete an existing dashboard modal from your project:

1. Delete the folder that contains your dashboard modal extension's files.
2. Remove the import and `.use()` statements for the extension from the [`extensions.ts`](https://dev.wix.com/docs/wix-cli/guides/extensions/about-the-extensions-ts-file.md) file.

<blockquote class="important">

**For app projects:** 

If you already have a version of your app project, you must build and deploy the project again after removing the dashboard modal files. 

</blockquote>

## See also
- [Dashboard Modal Extension Files and Code](https://dev.wix.com/docs/wix-cli/guides/extensions/dashboard-extensions/dashboard-modals/dashboard-modal-extensions-files-and-code.md)
- [About Dashboard Modal Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-modals/about-dashboard-modals.md)