> 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 Page Extensions

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

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

## Article Content:

# Add Dashboard Page Extensions with the Wix CLI

You can add dashboard pages to your project using dashboard page extensions. These pages let you or your users manage sites and business data from the dashboard. They're not visible to site visitors.

The Wix CLI makes it easy to create and develop dashboard page extensions, and to manage them in the sidebar. 

For general information about this extension type, read [About Dashboard Page Extensions](https://dev.wix.com/docs/wix-cli/guides/extensions/dashboard-extensions/about-dashboard-extensions.md).

Follow the instructions below to:

1. Create a dashboard page extension for your project.
2. Customize your dashboard page.

Once this task is complete, you have a dashboard page extension that adds a new dashboard page to either your headless project's site, or your users' sites.

## Before you begin

<!-- TODO: LINKS - original link was quickstart.. which link to use? -->
+ You must have a project that was [created using the Wix CLI](invalid-url).
+ You must be logged into your Wix account. If you don't have one, [sign up for a Wix account](https://manage.wix.com/account/custom-apps).
+ Learn how to interact with the Wix dashboard using the [Wix Dashboard SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md).

## 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 page extension.

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

1. Enter the route for your page. The route is the path that is appended to the dashboard base URL to access the dashboard page.

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

```tsx
src
└── extensions
    └── dashboard
        └── pages
            └── <your-route-name>
                ├── <your-page-name>.extension.ts
                └── <your-page-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 Page Extension Files and Code](https://dev.wix.com/docs/wix-cli/guides/extensions/dashboard-extensions/dashboard-pages/dashboard-page-extension-files-and-code.md).

## Step 2 | Customize your dashboard page

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

1. Click the link to open the dashboard in your browser and navigate to the page you've created. Leave this window open.

2. Go to your dashboard page's `.tsx` file and change `subtitle` in `Page.Content` to `"Hello world!"`:

    ```tsx
    const DashboardPage: FC = () => {
      return (
        <WixDesignSystemProvider features={{ newColorsBranding: true }}>
          <Page>
            <Page.Header
              title="My Dashboard Page"
              subtitle="This is a subtitle for your page"
            />
            <Page.Content>
              <EmptyState
                title="My Dashboard Page"
                subtitle="Edit your page code to change this text."
                skin="page"
              />
            </Page.Content>
          </Page>
        </WixDesignSystemProvider>
      );
    };
    
    export default DashboardPage;
    ```

3. Save your file.

4. Navigate back to the dashboard page in your browser and see your changes.

## Dashboard menu plugins

If you use a [dashboard menu plugin](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-plugins/dashboard-menu-plugins/dashboard-menu-plugin-extensions.md) to navigate to your dashboard page, you can customize your dashboard page extension to interact with any data passed from the dashboard page that hosts the menu plugin. 

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

## 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 page

To delete an existing dashboard page from your project:

1. Delete the folder that contains your dashboard page 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 page files. 

</blockquote>

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