Basic Elements - Plate

<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.

ParagraphElement: Renders paragraph elements.
H1Element: Renders H1 elements.
H2Element: Renders H2 elements.
H3Element: Renders H3 elements.
BlockquoteElement: Renders blockquote elements.
HrElement: 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.