> 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 Plugin Extension Files and Code

## Article: Dashboard Plugin Extension Files and Code

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

## Article Content:

# Dashboard Plugin Extension Files and Code

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

- `<your-plugin-name>.extension.ts`: Builds the [plugin](#plugin-builder).
- `<your-plugin-name>.tsx`: Defines the [plugin content](#plugin-content).

## Plugin builder

The `<your-plugin-name>.extension.ts` file contains the dashboard plugin builder configuration. This file defines which dashboard page hosts your plugin.

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

```ts
export default extensions.dashboardPlugin({
  id: string,
  title: string,
  extends: string,
  component: string,
});
```

Here's an example builder definition:

```ts
export default extensions.dashboardPlugin({
  id: '4f7fe48c-a3f9-48ba-9c52-a6df24d58a6f',
  title: 'My Dashboard Plugin',
  extends: '0a208a9f-3b45-449c-ba8e-13a842ea5b84',
  component: './extensions/dashboard/plugins/my-plugin/my-plugin.tsx',
});
```

### Builder fields

The following fields can be used in the configuration object:

| Field | Type | Description |
|-------|------|-------------|
| `id` | string | Plugin ID as a ([GUID](https://en.wikipedia.org/wiki/Universally_unique_identifier)). The ID is automatically generated and must be unique across all extensions in the project. |
| `title` | string | The plugin title. The title is used to refer to the plugin in the project dashboard. |
| `extends` | string | Slot ID of the dashboard page hosting the plugin. |
| `component` | string | Path to the plugin content component. |

## Plugin content

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

The content is defined in a [React](https://react.dev/) component that renders when the page is active. Below is an example of how your `your-plugin-name.tsx` file will look upon creation: 

```tsx
import type { FC } from 'react';
import type { plugins } from '@wix/blog/dashboard'; 
import {
  WixDesignSystemProvider,
  Card,
  Text,
  TextButton,
} from '@wix/design-system';
import '@wix/design-system/styles.global.css';

type Props = plugins.BlogPosts.PostsBannerParams;

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/ozOleG2" target="_blank">
              documentation
            </TextButton>
            .
          </Text>
        </Card.Content>
      </Card>
    </WixDesignSystemProvider>
  );
};

export default Plugin;
```

In the dashboard plugin component, you can use:

- React to add code and login to your plugin.
- The [Wix SDK](https://dev.wix.com/docs/api-reference?apiView=SDK.md) to access Wix business solutions and site data.
- The [Wix Dashboard SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) to interact with the dashboard page’s data that's passed to the slot.
- The [Wix Design System](https://www.wixdesignsystem.com/) to work with the same React components Wix uses to build its own dashboard plugins.