---
title: "Paragraph Node"
description: "Add a paragraph node UI component to your Tiptap editor. More in the documentation!"
canonical_url: "https://tiptap.dev/docs/ui-components/node-components/paragraph-node"
---

# Paragraph Node

Add a paragraph node UI component to your Tiptap editor. More in the documentation!

Comprehensive styling for the core paragraph node and various other text elements in the Tiptap editor.

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

## Installation

You can add the node component via Tiptap CLI

```bash
npx @tiptap/cli@latest add paragraph-node
```

## Usage

The ParagraphNode provides styling for paragraphs and other text-related elements within the editor. To use it, include it in your project alongside the Tiptap editor.

```tsx
import { useEditor, EditorContent } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'

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

export default function BasicEditor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: `
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <p>A paragraph with <a href="#">a link</a> and <strong>bold text</strong>.</p>
      <blockquote>A blockquote with some insightful text.</blockquote>
      <hr/>
      <p>Another paragraph after a horizontal rule.</p>
    `,
  })

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

## Features

- Core styling for paragraphs with proper spacing
- Heading styles (h1-h4) with appropriate sizing
- Blockquote styling with left border
- Link styling with appropriate colors
- Horizontal rule (hr) styling
- Text decoration inheritance for nested spans
- Selection highlighting
- Proper cursor styles
- Empty paragraph placeholders
- Thread markup styles integration
- Highlight color variables
- Mathematics component integration
- Dark mode support
- Gap cursor styling

## Requirements

The `paragraph-node.scss` provides styling for many core Tiptap features. While it has no direct dependencies, it works best with:

Open source feature(s)

- [`@tiptap/starter-kit`](https://tiptap.dev/docs/editor/extensions/functionality/starterkit.md)
- [`@tiptap/extension-link`](https://tiptap.dev/docs/editor/extensions/marks/link.md)
- [`@tiptap/extension-highlight`](https://tiptap.dev/docs/editor/extensions/marks/highlight.md)
- [`@tiptap/extension-mathematics`](https://tiptap.dev/docs/editor/extensions/functionality/mathematics.md) (optional)