😎 Discover cool tips and tricks for customization in our next Developer Deep Dive virtual event - sign up now!

Installing and configuring plugins

Learn how to extend and customize Sanity Studio with plugins.

Plugins for Sanity Studio are installed just like any other dependency in your project, using your package manager of choice – such as yarn or npm. For the remainder of this article, we'll assume you're using npm.

After installation, a plugin must be imported from the package and added to the plugins array in the studio configuration, commonly found at the root of your project in a file named sanity.config.js or .ts.

Example: Install @sanity/color-input

Let’s install @sanity/color-input. It adds color as a schema type and provides a handy color picker to select the color value.

Gotcha

Whether you are installing a plugin or looking at the source code to learn how it works, make sure you are looking at the correct version! Many plugins have versions for both v2 and v3 of Sanity Studio. The two are not interchangeable!

Navigate to your project's root folder and run the following command in your terminal to install the plugin:

npm install @sanity/color-input

Then open your project configuration and import the colorInput function from the plugin package. Then add the colorInput() function call to the plugins array. Take care to include the parenthesis, as shown in the example. Then, finally, add a color field to any of your schemas.

// sanity.config.js
import {defineConfig} from 'sanity'
import {colorInput} from '@sanity/color-input'

export default defineConfig({
	// here we add the @sanity/color-input plugin to the Studio
  plugins: [colorInput()],

  // example schema
  schema: {
    types: [
      {
        type: 'document',
        name: 'color-demo',
        title: 'Document with color field',
        fields: [
          {
           // The 'color' schema type was added by the plugin
            type: 'color',
            name: 'mySwatch',
            title: 'Swatch',
          },
        ],
      },
    ],
  },
})

You should be rewarded with a color picker widget in your studio.

Configure

Some plugins accept a configuration object when created. Configuration is provided as an argument to the plugin function.

Example: Configure

Let's add and configure the @sanity/dashboard plugin. It adds a new tool to the studio, which can be configured with various widgets. (You can even add your own!)

Remember to install the plugin first!

// sanity.config.js
import {defineConfig} from 'sanity'
import {dashboardTool, projectUsersWidget, projectInfoWidget} from '@sanity/dashboard'

export default defineConfig({
  // ...

  // add and configure @sanity/dashboard
  // notice how we provide a configuration object with widgets
  plugins: [
		dashboardTool({ 
			widgets: [
			  projectInfoWidget(),
		    projectUsersWidget(),
			]
		}
	],
})

Get organized

Plugins are just snippets of Studio configuration. As your studio configuration grows, it can be helpful to organize distinct features into plugins. This reduces clutter and avoids huge inline functions in studio.config.js. It also makes your config portable!

Plugins can be published to npm (we recommend using @sanity/plugin-kit) or copy-pasted into other studios as you see fit.

For more on this topic, take a look at the plugin development docs.

Was this article helpful?