Overview
Plugin Kit is Verbb's design system for Craft CMS control panel interfaces. Use it when a CP screen outgrows Twig macros and one-off jQuery — complex forms, searchable pickers, rich text, conditionals, modals, builders, and similar. Small server-rendered settings pages do not need it.
@verbb/plugin-kit-web is the canonical UI: Craft-familiar custom elements (<pk-*>), shadow DOM, and --pk-* tokens. Import the components you need and use them from Twig, vanilla JS, or any host that speaks the DOM. React and Vue are thin adapters over the same elements; Forms is an optional headless schema engine for data-driven settings screens.
The look stays Craft-familiar — a bit nicer to use, not a separate product aesthetic bolted onto the control panel.
Built with
These libraries power the shipped components (bundled as dependencies of @verbb/plugin-kit-web). You do not have to install them separately unless your plugin imports them directly alongside the kit.
- Lit — custom element base and reactive rendering
- Floating UI — positioning for popovers, menus, tooltips, and similar overlays
- TipTap / ProseMirror — rich text editing (
pk-tiptap-*surfaces)
Getting started
This path assumes a PHP-only plugin (or a small JS entry) and <pk-*> elements on a Craft CP page:
- Quick Start — bundler + Craft asset bundle
- No-Build Step —
<link>/<script type="module">only - Tokens & CSS — styling and shadow DOM
- Reducing FOUCE — so undefined custom elements do not flash before they upgrade
Then browse the component reference for props, events, and slots.