---
title: "Horizontal Rule Node"
description: "Integrate a node component displaying horizontal rules in your Tiptap Editor. More in our docs!"
canonical_url: "https://tiptap.dev/docs/ui-components/node-components/horizontal-rule-node"
---

# Horizontal Rule Node

Integrate a node component displaying horizontal rules in your Tiptap Editor. More in our docs!

A styled horizontal rule node for displaying formatted horizontal rules in the editor.

> **Interactive demo:** [horizontal rule node](https://template.tiptap.dev/preview/tiptap-node/horizontal-rule-node)

## Installation

You can add the node component via Tiptap CLI

```bash
npx @tiptap/cli@latest add horizontal-rule-node
```

## Usage

The HorizontalRuleNode is primarily a styling component that enhances the appearance of horizontal rules in the editor. To use it, simply include it in your project and ensure you're using the HorizontalRule extension from Tiptap.

```tsx
import { useEditor, EditorContent } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import HorizontalRule from '@/components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'
import '@/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss'

export default function EditorWithHorizontalRule() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit.configure({ horizontalRule: false }), HorizontalRule],
    content: `
      <p>This is a paragraph before the horizontal rule.</p>
      <hr />
      <p>This is a paragraph after the horizontal rule.</p>
    `,
  })

  return <EditorContent editor={editor} />
}
```

## Features

- Syntax highlighting styles for horizontal rules
- Dark mode support
- Proper spacing and margins
- Enhanced readability with monospace font