Creating your own widget
How to create and publish your own widget for Dashboard
Widgets are simply objects that follow implement the DashboardWidget interface. Let's have a look at some sample widgets:
For example, a document list or maybe some cats?
Protip
The easiest way to package your widget for distribution is to wrap it in a plugin! To get started making your own plugins for Sanity Studio, check out this article on developing plugins.
When writing your widget components, it's recommended to use the DashboardWidgetContainer component from this package by importing it like so: import { DashboardWidgetContainer } from "@sanity/dashboard";.
This gives you a typical widget component structure with basic styles, and the option of presenting your content in the header, footer, or body of the widget.
If you need something more flexible you can create your own component.
Setting up the widget with the default setup will give you a basic widget that looks something like this:
// ./widgets/MyWidget.tsx
import { DashboardWidgetContainer } from "@sanity/dashboard";
export const MyWidget = () => (
<DashboardWidgetContainer
header="A cat"
footer={
<Flex direction="column" align="stretch">
<Button
flex={1}
paddingX={2}
paddingY={4}
mode="bleed"
tone="primary"
text="Get new cat"
/>
</Flex>
}
>
<figure>
<img src="https://placekitten.com/300/450" />
</figure>
</DashboardWidgetContainer>
)Next, export a function that tells the dashboard plugin how to use the widget:
// ./widgets/myWidget.ts
import type {DashboardWidget, LayoutConfig} from '@sanity/dashboard'
import { MyWidget } from './MyWidget.tsx'
export function myWidget(layout: LayoutConfig): DashboardWidget {
return {
name: 'my-widget',
component: function component() {
return <MyWidget />
},
layout: layout,
}
}Then, import myWidget into your Sanity config file and add it to the dashboard plugin.
// sanity.config.ts
import { defineConfig } from 'sanity'
import { dashboardTool } from '@sanity/dashboard'
import { myWidget } from './widgets/myWidget.ts'
/* ... */
export default defineConfig({
/* ... */
plugins: [
dashboardTool({ widgets: [myWidget()]})
]
})You can study the source code of these widgets to get a sense of how you can approach fetching documents, adding configuration, and so on: