Align Kit

Features

• Block-level text alignment.
• start, left, center, right, end, and justify values.
• HTML text-align style deserialization.
• Default-value cleanup.
• Configurable target block types.
• Registry dropdown toolbar for common alignments.

Usage

Add the Kit

Use AlignKit for the Plate UI setup. It targets headings, paragraphs, images, and media embeds.

import { createPlateEditor } from "platejs/react";

import { AlignKit } from "@/components/editor/plugins/align-kit";

export const editor = createPlateEditor({
  plugins: [...AlignKit],
});

Add the Toolbar Control

AlignToolbarButton shows left, center, right, and justify controls.

import { AlignToolbarButton } from "@/components/ui/align-toolbar-button";

export function AlignControls() {
  return <AlignToolbarButton />;
}