Getting started: WordPress

The wordpress/ui-kit plugin: blocks and shortcodes built on the PHP renderer, with theme and mode in the settings. Accordion, Tabs, FAQ and Pricing come alive with their own React 19 — in WordPress 7.1, wp.element is still React 18

1. Build the plugin

The build puts the plugin's PHP, the renderer (lib/), assets/ui-kit.css and the build/editor.js and build/view.js scripts into dist-wp/ui-kit/, with an installable zip next to it.

npm run build:wp
# → dist-wp/ui-kit-0.1.0.zip

2. Install

Plugins → Add New Plugin → Upload Plugin, or use WP-CLI. Requires WordPress 6.6+ (the react-jsx-runtime script for the editor) and PHP 8.1+. Tested with WordPress 7.1.3 on PHP 8.5.9 (the built-in php -S server) with SQLite Database Integration 3.1.0, the Twenty Twenty-Five theme and WP-CLI 2.12.

wp plugin install dist-wp/ui-kit-0.1.0.zip --activate

3. Theme and mode

Settings → UI Kit: Vercel or Liquid Glass; light, dark or “system” (a script in <head> sets data-mode before paint and tracks changes). The theme attributes are added to <html> through language_attributes on the front end only — the admin stays unchanged; the editor canvas gets the theme separately. “Page background” makes the body background transparent so the UI Kit theme background shows through. Fonts stay the site's: the plugin doesn't ship the Geist files, so with Vercel, components inherit the WordPress theme's font (Manrope in Twenty Twenty-Five) instead of Geist. For the Geist look, load fonts/geist.css and fonts/geist-mono.css from the npm package in your theme and set it as the body font.

4. Blocks

The “UI Kit” category: Button, Badge, Alert, Card (with inner blocks), Hero, Feature grid, Call to action, Testimonials, Logo cloud — rendered on the server (block.json + render.php) with no JavaScript on the page. Pricing table, FAQ, Accordion and Tabs are “islands”: the server outputs the markup plus props as JSON, and view.js (React 19 + these four components, ~250 KB, ~80 KB gzip) mounts the component in its place; without JS, the server markup stays. In the editor, blocks are configured in the sidebar (list items can be added, moved and removed), and the preview is the same server render (ServerSideRender), because the editor runs on React 18.

5. Shortcodes

For classic themes and widgets: ui_button, ui_badge, ui_alert, ui_card, ui_avatar, ui_progress, ui_separator, ui_spinner, ui_stats, ui_icon. Flags take no value (pill, dot, show_value). Attribute values are escaped; nested content goes through wp_kses_post, and nested shortcodes are expanded.

[ui_button variant="primary" href="/start" icon="Zap"]Get started[/ui_button]
[ui_badge color="green" dot]Live[/ui_badge]
[ui_alert variant="warning" title="Heads up"]Disk almost <strong>full</strong>.[/ui_alert]
[ui_card title="Project" description="Production"]Body [ui_badge]Nested[/ui_badge][/ui_card]
[ui_progress value="60" label="Upload" show_value]
[ui_stats label="Revenue" value="12480.5" delta="12.5" caption="vs last week"]

6. What's tested

Pages with every block and shortcode in both themes and in light, dark and system modes; clicks on Pricing, FAQ, Accordion and Tabs; inserting a block with the inserter, editing it in the sidebar and saving in the editor; a console free of plugin errors (a WordPress core warning about global-styles-css-custom-properties remains). Installing the zip with WP-CLI.

Other frameworks