---
title: Plugin Components
description: Learn how to create and style custom components for Plate plugins.
---

By default, Plate plugins are headless, meaning all nodes will be rendered as plain text. This guide will show you how to create and style custom components for your editor.

## Plate UI

Unless you prefer to build everything from scratch, we recommend using [Plate UI](/docs/components) to get started. Plate UI is a collection of components that you can copy into your app and modify to suit your needs.

In most respects, the process of adding components to your editor is the same regardless of whether you use Plate UI or build your own components from scratch.

## Defining Components

The simplest way of defining a component is using `PlateElement` or `PlateLeaf` as a wrapper for your content. This will ensure that the correct props are applied to your HTML element as required by Slate.

Note that the `children` prop must be rendered unconditionally in order for the editor to work correctly, including for void nodes.

### Element

```tsx
import { PlateElement, PlateElementProps } from '@udecode/plate-common/react';

export function BlockquoteElement({
  className,
  children,
  ...props
}: PlateElementProps) {
  return (
    <PlateElement asChild className={className} {...props}>
      <blockquote>{children}</blockquote>
    </PlateElement>
  );
}
```

### Leaf

```tsx
import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common/react';

export function CodeLeaf({ className, children, ...props }: PlateLeafProps) {
  return (
    <PlateLeaf asChild className={className} {...props}>
      <code>{children}</code>
    </PlateLeaf>
  );
}
```

### Styling with CSS

We recommend styling components using Tailwind CSS, which is the pattern used by Plate UI. However, it's also possible to use a global CSS file to style nodes based on the class names generated by Slate.

For each node, Slate will generate a class name with `slate-` followed by the type of the node. For example, paragraph nodes can be styled as follows:

```css
.slate-p {
  margin-bottom: 1rem;
}
```

## Register Components

To use your components with Plate, you'll need to register them with the associated plugin. There are two ways of doing so.

### Plugin Options

To register a component, use `node.component` option:

```tsx showLineNumbers {3-5,9}
const ParagraphPlugin = createPlatePlugin({
  // ... 
  node: {
    component: ParagraphElement,
  },
});

// OR
const ParagraphPlugin = BaseParagraphPlugin.withComponent(ParagraphElement)
```

### Editor Options

Alternatively, you can specify the component for each plugin key using the `override.components` option of `createPlateEditor`: 

```tsx showLineNumbers {5-6}
const editor = createPlateEditor({
  plugins: [ParagraphPlugin, LinkPlugin],
  override: {
    components: {
      [ParagraphPlugin.key]: ParagraphElement,
      [LinkPlugin.key]: LinkElement,
      // ...other components
    },
  },
});
```

