Nimble Porridge Muncher


    2.1.0 • Public • Published

    Sanity Tabs Plugin

    Input component for rendering fieldsets as tabs

    NPM version NPM Downloads


    Sanity now includes Field Groups from version 2.24.0.
    This feature supersedes this plugin, and it is now in maintenance only mode.


    Package Version Sanity Version
    2.1.x 2.1.x - 2.24.x
    2.0.x 2.0.x
    1.4.x 1.150.x

    How does it look?



    Clone the original demo repository and run sanity start to see how it works.

    How do I use it?

    Just add inputComponent: Tabs to your field. Please note that the field type must be object.

    import Tabs from 'sanity-plugin-tabs';
    export default {
      type: 'document',
      title: `Front Page`,
      name: `frontPage`,
      inputComponent: Tabs,
      fieldsets: [
        { name: 'main', title: 'Main', options: { sortOrder: 10 } },
        { name: 'aside', title: 'Aside', options: { sortOrder: 20 } },
        { name: 'meta', title: 'Meta', options: { sortOrder: 30 } },
      fields: [
          type: 'object',
          name: 'mainTitle',
          title: 'Main Title',
          fieldset: 'main',
          fieldsets: [{ name: 'ingress', title: 'Ingress' }],
          fields: [
              type: 'string',
              name: 'header',
              title: 'Header',
              type: 'string',
              name: 'ingressText',
              title: 'Text',
              fieldset: 'ingress',
          type: 'string',
          name: 'info',
          title: 'Information',
          fieldset: 'aside',
          type: 'object',
          name: 'aside',
          fieldset: 'meta',
          inputComponent: Tabs,
          fieldsets: [
            { name: 'tags', title: 'Tags' },
            { name: 'categories', title: 'Categories' },
          fields: [
              type: 'string',
              name: 'contentType',
              title: 'Content Type',
              fieldset: 'tags',
              type: 'string',
              name: 'category',
              title: 'Category',
              fieldset: 'categories',


    Run the following commands at the root of this repository.

    npm i
    npm link

    Now you can start developing the plugin.

    To include it in your Sanity test site, navigate to the root folder of your CMS project and run:

    npm link sanity-plugin-tabs

    You will now reference the local version of the plugin when importing it as below:

    import Tabs from 'sanity-plugin-tabs';


    To debug the plugin files in you then need to start Sanity with the flag --preserve-symlinks as in the command below:

    sanity start --preserve-symlinks

    And then from the sanity-plugin-tabs repository folder, run the project with:

    npm run dev

    Logging from the plugin is disabled by default, so if you'd like to see more detailed debug information, set the environment variable:


    This can be easily done by creating a file called .env.development next to your project's sanity.json and adding the line above to that file.


    npm i sanity-plugin-tabs

    DownloadsWeekly Downloads






    Unpacked Size

    57.4 kB

    Total Files


    Last publish


    • azzlack