Installing and configuring 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.

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

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.

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

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(),
			]
		}
	],
})

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.