Display inline notes within your schemas
✨ uses Sanity UI ✨ multiple styles ✨ dark mode compatible ✨
yarn add sanity-plugin-note-field
# or npm
npm i sanity-plugin-note-fieldWarning
This is a Sanity Studio V3 plugin. For the V2 version, please refer to the studio-v2 branch.
// `sanity.config.ts` / `sanity.config.js`:
import { defineConfig } from 'sanity'
import { noteField } from 'sanity-plugin-note-field'
export default defineConfig({
// ...
plugins: [
// ...
noteField(),
],
})defineField({
title: 'Important!',
description: 'a custom Message...',
name: 'myCustomNote',
type: 'note',
options: {
icon: () => <Warning size={20} weight="duotone" />,
tone: 'caution',
},
})| 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. |
| 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. |
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.
nickdimatteo.com · Github @ndimatteo · Instagram @ndimatteo