> 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/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/dashboard-extensions/dashboard-plugins/dashboard-plugin-extension-files-and-code.md

## Article Content:

# Dashboard Plugin Extension Files and Code

<blockquote classname="warning">

**Deprecated**

The Wix CLI for Apps is deprecated and no longer receives updates or new features. New projects should use the unified [Wix CLI](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md). [Determine which CLI your project uses](https://dev.wix.com/docs/wix-cli/guides/development/determine-which-cli-your-project-uses.md).

</blockquote>

In your app project, the source code for your dashboard plugins is found in the `src/dashboard/plugins` folder. 

Each plugin is defined in its own subfolder that contains the following files: 
- `plugin.json`: Defines the [plugin configuration](#plugin-configuration-page-pluginjson).
- `plugin.tsx`: Defines the [plugin content](#plugin-content-plugintsx).


## Plugin extension configuration (plugin.json)

The `plugin.json` file contains the dashboard plugin extension’s configuration details. This file defines which dashboard page hosts your plugin. 

```json
{ 
  "id": "f2848bc8-001c-47e6-8346-0082466b4f92",
  "title": "My Dashboard Plugin",
  "extends": "261e84a2-31d0-4258-a035-10544d251108"
}
``` 

| Field | Type | Description |
| ---- | ------ |------------------------- |
| `id` | String | ID of the plugin you created using the CLI. This ID is auto-generated by Wix. |
| `title` | String |  Name of the plugin. |
| `extends` | String |  Slot ID of the dashboard page hosting the plugin. |


## Plugin content (plugin.tsx)
The `page.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 `plugin.tsx` file will look upon creation: 
```tsx
import React, { type FC } from 'react';
import {
  WixDesignSystemProvider,
  Card,
  Text,
  Box,
  EmptyState,
  TextButton,
} from '@wix/design-system';
import '@wix/design-system/styles.global.css';

const Plugin: FC = () => {
  return (
    <WixDesignSystemProvider features={{ newColorsBranding: true }}>
      <Card>
        <Card.Header
          title="Dashboard Plugin"
          subtitle={
            <Box direction="horizontal" gap="1">
              <Text secondary>This is your dashboard plugin.</Text>
              <TextButton as="a" href="https://wix.to/dFFuEki" target="_blank">
                Learn more
              </TextButton>
            </Box>
          }
        />
        <Card.Divider />
        <Card.Content size="medium">
          <EmptyState
            theme="section"
            title="Here is some content"
            subtitle="Replace this with your own code"
          />
        </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 Dashboard SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) to interact with the dashboard page’s data that is passed to the slot.
- The [Wix Design System](https://www.wix-pages.com/wix-design-system/?path=/story/getting-started--about) to work with the same React components Wix uses to build its own dashboard plugins.