Basic Elements

---
title: Basic Elements
description: Commonly used block elements for structuring content.
---

<Cards>

<Card icon="heading" title="Heading" href="/docs/heading">
Create headings of various levels to structure content.
</Card>

<Card icon="blockquote" title="Blockquote" href="/docs/blockquote">
Emphasize important information with styled quotes.
</Card>

<Card icon="horizontal-rule" title="Horizontal Rule" href="/docs/horizontal-rule">
Insert horizontal lines to separate content.
</Card>

</Cards>

<ComponentPreview name="basic-blocks-demo" />

## Kit Usage

<Steps>

### Installation

The `BasicBlocksKit` bundles plugins for Paragraphs, Headings (H1, H2, H3), Blockquotes, and Horizontal Rules, along with their respective UI components from [Plate UI](/docs/installation/plate-ui).

<ComponentSource name="basic-blocks-kit" />

- [`ParagraphElement`](/docs/components/paragraph-node): Renders paragraph elements.
- [`H1Element`](/docs/components/heading-node): Renders H1 elements.
- [`H2Element`](/docs/components/heading-node): Renders H2 elements.
- [`H3Element`](/docs/components/heading-node): Renders H3 elements.
- [`BlockquoteElement`](/docs/components/blockquote-node): Renders blockquote elements.
- [`HrElement`](/docs/components/hr-node): Renders horizontal rule elements.

### Add Kit

Add the kit to your plugins:

```tsx
import { createPlateEditor } from 'platejs/react';
import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...BasicBlocksKit,
  ],
});
```

</Steps>

## Manual Usage

```bash
npm install @platejs/basic-nodes
```

For individual plugin setup and configuration, see the specific plugin documentation pages linked above.