Creating your own widget

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?

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:

<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>

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:

• dashboard-widget-document-list
• dashboard-widget-netlify
• dashboard-widget-vercel