Introducing GROQ-powered Webhooks

Early Access: Sanity UI

Keep your custom studio elements consistent with built-in UI components.

When you're creating new tools and custom inputs, it's important for your editor experience to make sure your customizations match the overall design of the studio. To create this consistency, you can use the Sanity UI component library to create custom experiences without creating custom designs or adding custom CSS.

Usage of Sanity UI

The Sanity UI package comes bundled for most studio usage, but if you're creating a plugin or tool, you'll want to install the package via NPM.

npm install @sanity/ui

From there, you can import the various components into your custom inputs, tools, or widgets. For example, if you wish to apply a tooltip to a string input, you can create a custom input that uses the Text, Box, TextInput, and Tooltip design primitives to create one with all the design elements of your studio built right in.

import React from 'react'

import {PatchEvent, set} from 'part:@sanity/form-builder/patch-event'
import FormField from 'part:@sanity/components/formfields/default'

import {
  Tooltip,
  Text,
  Box,
  TextInput
} from '@sanity/ui'


// A custom input that applies a tooltip to a string input
const HoverInput = React.forwardRef((props, ref) => {
  const { type, onChange } = props
  return(
    <FormField label={type.title} description={type.description}>
      <Tooltip
        content={(
          <Box padding={2}>
            <Text>Important Text</Text>
          </Box>
        )}
        placement="top"
      >
        <TextInput
          type="text"
          ref={ref}
          placeholder={type.placeholder}
          value={props.value}
          onChange={event => {onChange(PatchEvent.from(set(event.target.value)))}}
        /> 
      </Tooltip>
    </FormField>
  )
})

export default {
  name: 'simple',
  title: 'Simple example',
  type: 'document',
  fields: [
    {
      name: 'seoString',
      title: 'Something really important for SEO',
      description: 'Don\'t forget to make it SEO friendly!',
      type: 'string',
      inputComponent: HoverInput
    }
  ]
}

See this guide on creating custom inputs and tools with Sanity UI.

Full documentation and playground

Sanity UI comes with a full set of UI primitives that can be mixed, matched, and composed into many different design patterns. The full list of components can be found in the official Sanity UI documentation. To get a better feel for creating design patterns, you can also experiment with all the components in this interactive component playground.

Was this article helpful?