> 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 Plugin Extensions with the Wix CLI

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

## Article Link: https://dev.wix.com/docs/go-headless/wix-managed-headless/extensions/dashboard/dashboard-plugins/add-dashboard-plugin-extensions-with-the-wix-cli.md

## Article Content:

# Add Dashboard Plugin Extensions with the Wix CLI

Dashboard plugins allow you to extend and enhance the functionality of dashboard pages provided by Wix business solutions on your headless project's site, like Wix Stores or Wix Bookings. Use them when you want to add custom UI or logic into the dashboard pages your team already uses to run the site.

Under the hood, the CLI registers the plugin on your headless project's [private app](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md#projects-private-app), which is the mechanism Wix uses to install extensions on your site. See [Exposing apps publicly and privately](https://dev.wix.com/docs/build-apps/get-started/overview/exposing-apps-publicly-and-privately.md) for context on private apps.

The Wix CLI makes it easy to create and develop dashboard plugins. You build your plugin using Wix's React/Node.js stack, and the plugin is deployed and hosted on the Wix cloud.

For more information on dashboard plugin extensions, read [About Dashboard Plugins](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/about-dashboard-plugin-extensions.md).

Follow the instructions below to:

1. Create a dashboard plugin extension for your project.
1. Customize your dashboard plugin.

Once this task is complete, your headless project will have a dashboard plugin that adds custom functionality to a Wix business solution's dashboard page.  

<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 plugin extension

In the terminal: 

1. Navigate to your project repo.
1. Run the [generate](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/generate.md) command.

1. Follow the prompts for creating a dashboard plugin.

Upon completion, the extension files will be created in your project directory with the following structure: 
```tsx
.
└── <your-project-name>/
    └── src/
        └── extensions
            └── dashboard/
                └── plugins/
                    └── <your-plugin-name>/
                        ├── <your-plugin-name>.extension.ts
                        └── <your-plugin-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 information about these files, see [Dashboard Plugin Extension Files and Code](https://dev.wix.com/docs/go-headless/wix-managed-headless/supported-extensions/dashboard/dashboard-plugins/dashboard-plugin-extension-files-and-code.md).

## Step 2 | Customize your dashboard plugin

Once you finish generating your dashboard plugin, you can find your plugin's auto-generated React component in your `.tsx` file. 

1. Run the [dev](https://dev.wix.com/docs/wix-cli/command-reference/project-commands/dev.md) command to open the dev menu.

2. Follow the prompts, then click the link to open a preview of the dashboard in your browser, then navigate to the dashboard page hosting your plugin.
    
    ![page plugin](https://wixmp-833713b177cebf373f611808.wixmp.com/images/6a4cd4e474e7ccc11407f2c2a9a2ddcf.png)
    Leave this window open.

3. Go to your `.tsx` file and edit the text inside the `<Text>` component to "Hello world!".

    ```tsx
    const Plugin: FC<Props> = (props) => {
      return (
        <WixDesignSystemProvider features={{ newColorsBranding: true }}>
          <Card>
            <Card.Header title="Dashboard Plugin" />
            <Card.Divider />
            <Card.Content size="medium">
              <Text>
                This dashboard plugin was generated with Wix CLI. Customize it according to your logic. To learn more, read our{' '}
                <TextButton as="a" href="https://wix.to/dFFuEki" target="_blank">
                  documentation
                </TextButton>
                .
              </Text>
            </Card.Content>
          </Card>
        </WixDesignSystemProvider>
      );
    };

    export default Plugin;
    ```

    >**Note:** When it comes to designing the UI for your plugin, consider using the [Wix Design System](https://www.wixdesignsystem.com/), a collection of reusable React components that you can use to make your project appear and feel like a native Wix experience. 

1. Customize your plugin to interact with the dashboard page data passed to the [plugin's slot](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/supported-wix-app-dashboard-pages/about-dashboard-page-slots.md) using the [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md) method from the Dashboard SDK:

    1. Make sure the [`@wix/dashboard`](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) package is installed in your project. 
    1. Add the following import statement to your code: 
        ```js
        import { dashboard } from '@wix/dashboard';
        ```
    1. To retrieve the data from the dashboard page, call the `observeState()` method. 
        ```js
        dashboard.observeState((componentParams) => {
          console.log("componentParams:", componentParams);
        });
        ```
    1. Use React to add code and logic to your plugin. 
 
1. Save your file.

1. Navigate back to the dashboard page in your browser 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/go-headless/wix-managed-headless/develop-your-project/build-and-deploy.md) it.

## Delete a dashboard plugin

To delete an existing dashboard plugin from your project:

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

<blockquote class="important">

**Important:**

If you've already released a version of your project, you must build and deploy the project again after removing the dashboard plugin files.

</blockquote>

## See also
- [Dashboard Plugin Extension Files and Code](https://dev.wix.com/docs/go-headless/wix-managed-headless/supported-extensions/dashboard/dashboard-plugins/dashboard-plugin-extension-files-and-code.md)
- [About Dashboard Plugin Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/about-dashboard-plugin-extensions.md)
- [About Dashboard Page Slots](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/supported-wix-app-dashboard-pages/about-dashboard-page-slots.md)