Sanity Studio v3 is here. Find out more on our blog →

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:

<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 of documents, adding configuration, and so on:

Was this article helpful?