> 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: Build a Dashboard Page in Studio Two

## Article: Build a Dashboard Page in Studio Two

## Article Link: https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-pages/build-a-dashboard-page-in-studio-two.md

## Article Content:

# Build a Dashboard Page in Studio Two

A [dashboard page](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-pages/about-dashboard-pages.md) 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 page to one that looks and behaves like a native Wix dashboard screen.

Follow the instructions below to:

1. Scaffold the page.
2. Set the configuration.
3. Build the page UI.
4. Call Wix APIs from the page.

## Step 1 | Scaffold the page

Start from a generated dashboard page rather than an empty folder, so the file structure and registration are already in place.

For the full procedure, see [Add a Dashboard Page Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-pages/add-a-dashboard-page-extension-in-studio-two.md).

You can find the new files under `src/extensions/dashboard/pages/<page-route>/`. You spend most of this article in `<page-route>.tsx`. For what every file in the folder is for, see [Dashboard Page Extension Files and Code](https://dev.wix.com/docs/dashboard-extensions/dashboard-pages/dashboard-page-extension-files-and-code.md).

## Step 2 | Set the configuration

`<page-route>.extension.ts` is the configuration file you own. It declares the page ID, title, route, and path to the React component.

```ts
export default extensions.dashboardPage({
  id: '40c70303-4eac-44cb-bb53-4e583a036682',
  title: 'Item list',
  routePath: 'item-list',
  component: './extensions/dashboard/pages/item-list/item-list.tsx',
});
```

Keep `id` stable once other code depends on it. Menu plugins and [`navigate()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/navigate.md) both use this value as the target page ID.

Change `title` when you want a different browser tab title or sidebar label. Change `routePath` when you want a different dashboard URL segment.

For every field, see [Dashboard Page Extension Files and Code](https://dev.wix.com/docs/dashboard-extensions/dashboard-pages/dashboard-page-extension-files-and-code.md#configuration-fields).

## Step 3 | Build the page UI

Write the page in `<page-route>.tsx` as a React component. Prefer the [Wix Design System](https://dev.wix.com/docs/build-apps/develop-your-app/design/about-the-wix-design-system.md) so the page matches native Wix dashboard screens.

A generated page typically wraps its content in `WixDesignSystemProvider` and `Page`:

```tsx
import React, { type FC } from 'react';
import { Page, EmptyState, WixDesignSystemProvider } from '@wix/design-system';
import '@wix/design-system/styles.global.css';

const DashboardPage: FC = () => {
  return (
    <WixDesignSystemProvider features={{ newColorsBranding: true }}>
      <Page>
        <Page.Header
          title="Item list"
          subtitle="Review and open items from this list."
        />
        <Page.Content>
          <EmptyState
            title="No items yet"
            subtitle="Items you add will show up here."
            skin="page"
          />
        </Page.Content>
      </Page>
    </WixDesignSystemProvider>
  );
};

export default DashboardPage;
```

Replace `EmptyState` with tables, cards, or forms as the page's job becomes clear. Keep the `Page.Header` and `Page.Content` structure so the layout stays aligned with other dashboard pages.

## Step 4 | Call Wix APIs from the page

Inside the page component you can:

- Call the [Dashboard SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) to show toasts, open [dashboard modals](https://dev.wix.com/docs/overview/extensions-framework/dashboard-extensions/dashboard-modals.md), and send the Wix user to another dashboard page.
- Call the [Wix JavaScript SDK](https://dev.wix.com/docs/sdk.md) to read and write site data, including business solution APIs.

To connect two or more of your pages, for example a list page and a detail page, see [Navigate Between Dashboard Pages in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-pages/navigate-between-dashboard-pages-in-studio-two.md). For the [`navigate()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/navigate.md) contract, including calls from plugins and menu plugins, see [About Dashboard Page Navigation](https://dev.wix.com/docs/sdk/host-modules/dashboard/about-dashboard-page-navigation.md).

When the page behaves the way you want, click **Publish** to ship it with your site.

## See also

- [About Dashboard Pages](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-pages/about-dashboard-pages.md)
- [Add a Dashboard Page Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-pages/add-a-dashboard-page-extension-in-studio-two.md)
- [Navigate Between Dashboard Pages in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-pages/navigate-between-dashboard-pages-in-studio-two.md)
- [Dashboard Page Extension Files and Code](https://dev.wix.com/docs/dashboard-extensions/dashboard-pages/dashboard-page-extension-files-and-code.md)
- [Dashboard Pages](https://dev.wix.com/docs/overview/extensions-framework/dashboard-extensions/dashboard-pages.md)