Note Fields for Sanity

Display inline notes within your schemas
✨ uses Sanity UI ✨ multiple styles ✨ dark mode compatible ✨

🔌 Install

yarn add sanity-plugin-note-field
# or npm
npm i sanity-plugin-note-field

Warning
This is a Sanity Studio V3 plugin. For the V2 version, please refer to the studio-v2 branch.

⚙️ Configure

// `sanity.config.ts` / `sanity.config.js`:
import { defineConfig } from 'sanity'
import { noteField } from 'sanity-plugin-note-field'

export default defineConfig({
  // ...
  plugins: [
    // ...
    noteField(),
  ],
})

🗒️ Usage

defineField({
  title: 'Important!',
  description: 'a custom Message...',
  name: 'myCustomNote',
  type: 'note',
  options: {
    icon: () => <Warning size={20} weight="duotone" />,
    tone: 'caution',
  },
})

Properties

Name	Type	Description
type	string	(Required) Value must be set to note.
name	string	(Required) The field name. This will be the key in the data record.
title	string	(Optional) Short title, appears in bold above the optional description.
description	string / React.Component	(Optional) Long form message, displayed under the title.

Options

Name	Type	Description
icon	React.Component	(Optional) Display an icon alongside your note's title/message. Just remember that any schema file with icons in them should have a .jsx or .tsx extension.
tone	string	(Optional) The color of the note. Accepts any of the Sanity UI Card tone values. Defaults to primary.

🧪 Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.

🤝 License

MIT

nickdimatteo.com  ·  Github @ndimatteo  ·  Instagram @ndimatteo