API ReferencePluginsblocksPlugin

blocksPlugin

Show the component drawer for dragging new components onto the canvas.

import { Puck, blocksPlugin } from "@puckeditor/core";
 
const blocks = blocksPlugin();
 
export function Editor() {
  return <Puck plugins={[blocks]} />;
}

This plugin is included by default. Explicitly including it allows you to reorder plugins in the plugin rail.

Params

Param	Example	Type	Status
`icon`	`icon: <Box />`	ReactNode	-
`label`	`label: "Blocks"`	String	-

Optional params

`icon`

React node displayed alongside label in the plugin rail. Defaults to a hammer icon.

import { Puck, blocksPlugin } from "@puckeditor/core";
import { Box } from "lucide-react";
 
const blocks = blocksPlugin({
  icon: <Box />,
});
 
export function Editor() {
  return <Puck plugins={[blocks]} />;
}

`label`

Label shown in the plugin rail. Defaults to "Blocks".

import { Puck, blocksPlugin } from "@puckeditor/core";
 
const blocks = blocksPlugin({
  label: "Components",
});
 
export function Editor() {
  return <Puck plugins={[blocks]} />;
}

Plugin

fieldsPlugin