Components overview

ProseKit ships a set of UI components you can copy and paste into your project (toolbars, menus, drag handles, popovers) with framework bindings for React, Vue, Preact, Svelte, and Solid. They're styled with Tailwind CSS by default, but every part is headless so you can restyle freely.

Page	What you build with it
Toolbar	Persistent button bar at the top of the editor.
Inline menu	Floating menu over the current text selection.
Slash menu	Command palette triggered by /.
Mention menu	Mention popup triggered by @ or #.
Block handle	Drag and add handles in the gutter beside each block.
Drop indicator	Line shown between blocks during drag-and-drop.
Table handle	Row and column handles for selecting and editing tables.
Resizable	Drag handles for resizing atomic nodes (images, embeds).

The shadcn registry components are built with Tailwind v4.

1. Install Tailwind CSS

   Follow the official Tailwind installation guide for your bundler.

2. Install the icon plugin

   We use @egoist/tailwindcss-icons for icons. Install it alongside the Lucide icon set:

   • pnpm
   • npm
   • yarn
   • bun

   pnpm add @egoist/tailwindcss-icons @iconify-json/lucide

3. Register the plugin

   Add the plugin in your global stylesheet:

   @import "tailwindcss";
   @plugin "@egoist/tailwindcss-icons";

4. Import ProseKit's base styles

   The registry components rely on the base styles:

   import 'prosekit/basic/style.css'