Blockquote Element

Text 1

About

A blockquote element for the Plate rich-text editor that renders quoted content with an italic, left-bordered style.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Blockquote Element to your project and fits it to your theme.

Code

How Blockquote Element is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import { BlockquoteElement } from "@/components/ui/blockquote-node";

import { BlockquotePlugin } from "@platejs/basic-nodes/react";
import { Plate, PlateContent, usePlateEditor } from "platejs/react";

const initialValue = [
  {
    type: "p",
    children: [
      { text: "Blockquotes help you emphasize important information." },
    ],
  },
  {
    type: "blockquote",
    children: [{ text: "The best way to predict the future is to invent it." }],
  },
  {
    type: "blockquote",
    children: [{ text: "Simplicity is the ultimate sophistication." }],
  },
];

export default function BlockquoteDemo() {
  const editor = usePlateEditor({
    plugins: [
      BlockquotePlugin.configure({
        node: { component: BlockquoteElement },
      }),
    ],
    value: initialValue,
  });

  return (
    <div className="mx-auto w-full max-w-xl p-6">
      <Plate editor={editor}>
        <PlateContent
          className="min-h-40 rounded-lg border bg-background p-4 text-sm text-foreground focus:outline-none"
          placeholder="Type…"
        />
      </Plate>
    </div>
  );
}