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.tsx: Defines the plugin content.The plugin.json file contains the dashboard plugin extension’s configuration details. This file defines which dashboard page hosts your plugin.
{
"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. |
The page.tsx file contains the dashboard plugin content.
The content is defined in a React component that renders when the page is active. Below is an example of how your plugin.tsx file will look upon creation:
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: