> 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: Dashboard Modal Extensions Files and Code

## Article: Dashboard Modal Extensions Files and Code

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

## Article Content:

# Dashboard Modal Extensions Files and Code

When you generate a dashboard modal extension, the CLI adds the following files to your project:

- **`<your-modal-name>.extension.ts`**: Builds the [modal](#modal-builder).
- **`<your-modal-name>.tsx`**: Defines the [modal content](#modal-content).
- **`<your-modal-name>.config.ts`**: Contains configurable [modal properties](#modal-configuration).

## Modal builder

The `<your-modal-name>.extension.ts` file contains the dashboard modal builder configuration.

The modal builder is defined using the following schema, shown here as a TypeScript type:

```ts
export default extensions.dashboardModal({
  id: string,
  title: string,
  width: number,
  height: number,
  component: string,
});

```

### Builder fields

| Field  | Type   | Description |
|--------|--------|-------------|
| `id`   | string | The modal ID ([GUID](https://en.wikipedia.org/wiki/Universally_unique_identifier)) is automatically generated and shouldn't be changed. The ID is used to register the modal in the project dashboard. The ID must be unique across all pages in the project. |
| `title`| string | The modal title. The title is used to refer to the modal in the project dashboard. |
| `width` | number |  Initial width of the modal while loading. |
| `height` | number | Initial height of the modal while loading. |
| `component` | string |  Path of the modal content. |

Here's an example builder definition:

```ts
export default extensions.dashboardPlugin({
  id: 'f9411ed6-f0da-439b-ac40-350334228bad',
  title: 'Events Plugin',
  width: config.width,
  height: config.height,
  component: './extensions/dashboard/modals/my-modal/my-modal.tsx',
});

```

## Modal content

The `<your-modal-name>.tsx` file contains the dashboard modal content.

The content is defined as a [React](https://react.dev/) component that renders when the modal is active.

Inside a dashboard modal component you may choose to use:

- The [Wix SDK](https://dev.wix.com/docs/api-reference?apiView=SDK.md) to access Wix business solutions and site data.
- The [Wix Dashboard React SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) to navigate users to pages in the dashboard, display other dashboard modals, or send users alerts and updates using toasts.
- The [Wix Design System](https://www.wixdesignsystem.com/) to use the same React components Wix uses to build its own dashboard pages.

## Modal configuration

The `<your-modal-name>.config.ts` file contains the configurable properties for the dashboard modal.

Here is an example of the configuration: 

```ts

export default {
  title: 'My Modal,
  width: 550,
  height: 600,
}

This file is imported into the `.tsx` file to keep the modal settings organized and easily maintained.