Tag Element

Text 1

About

A pill-shaped tag element for the Plate editor that renders selectable, styleable inline labels with focus and read-only link states.

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

Code

How Tag 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 { TagElement } from "@/components/ui/tag-node";
import { TagPlugin } from "@platejs/tag/react";
import { Plate, PlateContent, usePlateEditor } from "platejs/react";

const tag = (value: string) => ({
  children: [{ text: "" }],
  type: "tag",
  value,
});

export default function Demo() {
  const editor = usePlateEditor({
    plugins: [TagPlugin.withComponent(TagElement)],
    value: [
      {
        type: "p",
        children: [
          { text: "" },
          tag("React"),
          { text: " " },
          tag("TypeScript"),
          { text: " " },
          tag("Plate"),
          { text: " " },
          tag("Next.js"),
          { text: " " },
          tag("Tailwind CSS"),
          { text: " " },
          tag("Radix UI"),
          { text: " " },
          tag("shadcn/ui"),
          { text: " " },
          tag("Slate"),
          { text: "" },
        ],
      },
    ],
  });

  return (
    <div className="w-full max-w-md rounded-lg border bg-background p-4 text-foreground shadow-sm">
      <Plate editor={editor}>
        <PlateContent
          className="min-h-[80px] rounded-md p-2 leading-loose focus:outline-none"
          placeholder="Add tags..."
        />
      </Plate>
    </div>
  );
}