> 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 Modal in Studio Two

## Article: Build a Dashboard Modal in Studio Two

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

## Article Content:

# Build a Dashboard Modal in Studio Two

A [dashboard modal](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-modals/about-dashboard-modals.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 modal to a modal you can open from a dashboard page.

Follow the instructions below to:

1. Scaffold the modal.
2. Set the configuration.
3. Build the modal UI.
4. Open and close the modal.

## Step 1 | Scaffold the modal

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

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

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

## Step 2 | Set the configuration

`<modal-folder>.extension.ts` is the configuration file you own. It declares the modal ID, title, size, and path to the React component. Title, width, and height come from `<modal-folder>.config.ts`.

```ts
import config from './my-custom-modal.config';

export default extensions.dashboardModal({
  id: '881eedb6-b5a1-4b86-ac13-72c73df1af4a',
  title: config.title,
  width: config.width,
  height: config.height,
  component: './extensions/dashboard/modals/my-custom-modal/my-custom-modal.tsx',
});
```

Keep the modal ID stable once other code depends on it. Dashboard pages, menu plugins, and [`openModal()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/open-modal.md) all use this value as the target modal ID.

Change `title`, `width`, and `height` in the shared config when you want a different title or size.

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

## Step 3 | Build the modal UI

Write the modal in `<modal-folder>.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 modal matches native Wix dashboard screens.

A generated modal typically wraps its content in `WixDesignSystemProvider` and `CustomModalLayout`:

```tsx
import type { FC } from 'react';
import { dashboard } from '@wix/dashboard';
import {
  WixDesignSystemProvider,
  Text,
  Box,
  CustomModalLayout,
} from '@wix/design-system';
import '@wix/design-system/styles.global.css';
import config from './my-custom-modal.config.ts';

const { width, height, title } = config;

const Modal: FC = () => {
  return (
    <WixDesignSystemProvider>
      <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>Hello world!</Text>
          </Box>
        }
      />
    </WixDesignSystemProvider>
  );
};

export default Modal;
```

Replace the `Text` content with forms, confirmations, or other short workflows as the modal's job becomes clear. Keep `CustomModalLayout` so the chrome stays aligned with other dashboard modals.

To receive custom data passed into the modal, call [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md).

## Step 4 | Open and close the modal

A modal doesn't appear in dashboard navigation on its own. Open it from a dashboard page, a menu plugin, or another dashboard surface with [`openModal()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/open-modal.md). Pass the modal ID from the configuration file.

```tsx
import { dashboard } from '@wix/dashboard';

function MyComponent() {
  return (
    <button
      onClick={() =>
        dashboard.openModal({
          modalId: '881eedb6-b5a1-4b86-ac13-72c73df1af4a',
        })
      }
    >
      Open Modal
    </button>
  );
}
```

Inside the modal, call [`closeModal()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/close-modal.md) from the primary and secondary actions, as in the generated layout above. You can pass data back to the opener when the modal closes. For the full contract, including parameters and the close result, see [`openModal()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/open-modal.md) and [`closeModal()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/close-modal.md).

To add the calling page first, 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).

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

## See also

- [About Dashboard Modals](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-modals/about-dashboard-modals.md)
- [Add a Dashboard Modal Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-modals/add-a-dashboard-modal-extension-in-studio-two.md)
- [Dashboard Modal Extension Files and Code](https://dev.wix.com/docs/dashboard-extensions/dashboard-modals/dashboard-modal-extension-files-and-code.md)
- [Dashboard Modals](https://dev.wix.com/docs/overview/extensions-framework/dashboard-extensions/dashboard-modals.md)