How to add an HR component to blockContent schema in Sanity?
Great question! Adding a horizontal rule (hr) to your blockContent schema is definitely doable. Since a horizontal rule is essentially a visual divider without any fields, you'll want to create a simple custom block object.
Here's how to do it:
1. Define the HR block type in your schema:
import {defineType} from 'sanity'
export const hr = defineType({
name: 'hr',
type: 'object',
title: 'Horizontal Rule',
fields: [
{
name: 'style',
type: 'string',
title: 'Style',
options: {
list: [
{title: 'Standard', value: 'standard'},
{title: 'Dashed', value: 'dashed'},
]
},
initialValue: 'standard'
}
],
preview: {
prepare() {
return {
title: 'Horizontal Rule'
}
}
}
})If you don't need any customization options, you can make it even simpler with just a placeholder field:
export const hr = defineType({
name: 'hr',
type: 'object',
title: 'Horizontal Rule',
fields: [
{
name: 'style',
type: 'string',
hidden: true,
initialValue: 'break'
}
]
})2. Add it to your blockContent array:
defineField({
name: 'body',
type: 'array',
of: [
{type: 'block'},
{type: 'hr'}, // Your new HR block
{type: 'image'},
// other custom blocks
]
})3. Render it on the frontend:
When using @portabletext/react or similar libraries, add a component for the hr type:
const components = {
types: {
hr: () => <hr className="my-divider" />
}
}
<PortableText components={components} value={content} />The key insight here is that an HR is just a custom block type without meaningful content fields. You're essentially creating an object type that acts as a marker in your Portable Text array, which you then render as an <hr> element on the frontend.
Some folks also add a custom icon or preview component in the Studio to make it more visually clear when editing. Hope this helps!
Show original thread2 replies
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.