Creating a custom divider component in Sanity Studio

Yes, you can create a divider component without fields in Sanity! While Sanity schemas typically require at least one field, there are a few workarounds the community uses:

Simple workaround: Hidden field

The easiest approach is to add a single field with hidden: true:

{
  name: 'divider',
  type: 'object',
  title: 'Divider',
  fields: [
    {
      name: 'placeholder',
      type: 'string',
      hidden: true
    }
  ]
}

This satisfies Sanity's requirement for at least one field while keeping your Studio UI clean.

Better approach: Custom input component

For a more polished solution, you can use a custom input component with Sanity UI to render a visual divider:

// createDivider.js
import React from 'react'
import { Container } from '@sanity/ui'

export function createDivider({title}) {
  return {
    inputComponent: () => (
      <Container width={100} padding={4}>
        {/* Your custom divider styling here */}
      </Container>
    ),
    name: `divider${Math.random().toString(16).slice(2)}`,
    title,
    type: "string",
  }
}

// In your schema
import { createDivider } from './createDivider'

export default {
  name: 'myDocument',
  type: 'document',
  fields: [
    // ... other fields
    createDivider("Section Break"),
    // ... more fields
  ]
}

This approach gives you full control over the visual appearance and lets you create reusable divider components throughout your schemas. You can style it however you need using Sanity UI components.

The custom component approach is particularly useful if you want to add visual separation between field groups or create section headers in your Studio forms. There's even a GitHub repo with custom Studio components that includes dividers and other helpful utilities you can reference!