Toggle Base Kit

Component

About

A Plate editor plugin kit that registers the base toggle plugin with a static toggle element for server-side rendering of collapsible content.

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

Code

How Toggle Base Kit is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";

import { createSlateEditor } from "platejs";
import { PlateStatic } from "platejs/static";

import { BaseToggleKit } from "@/components/ui/toggle-base-kit";

const value = [
  {
    type: "toggle",
    children: [{ text: "Toggle heading" }],
  },
  {
    type: "p",
    children: [{ text: "Hidden content inside the toggle." }],
  },
];

export default function Demo() {
  const editor = createSlateEditor({
    plugins: [...BaseToggleKit],
    value,
  });

  return (
    <div className="p-6">
      <PlateStatic editor={editor} />
    </div>
  );
}