Keyboard Input Leaf

Text 1

About

A styled keyboard-shortcut leaf that renders selected text as a keycap-styled kbd element in a Plate editor.

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

Code

How Keyboard Input Leaf 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 { KbdLeaf } from "@/components/ui/kbd-node";

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

export default function KbdNodeDemo() {
  const editor = usePlateEditor({
    plugins: [KbdPlugin.withComponent(KbdLeaf)],
    value: [
      {
        type: "p",
        children: [
          { text: "Press " },
          { kbd: true, text: "⌘ + B" },
          { text: " for bold or " },
          { kbd: true, text: "⌘ + I" },
          { text: " for italic." },
        ],
      },
    ],
  });

  return (
    <div className="w-full max-w-md rounded-lg border p-4">
      <Plate editor={editor}>
        <PlateContent className="outline-none" readOnly />
      </Plate>
    </div>
  );
}