VuiAdmin

Getting started

WordPress

VUI ships a WordPress block theme. theme.json and the stylesheet are generated from packages/web/ui/react/src/theme.css, so WordPress reads the same tokens as the React and Vue packages and a WordPress site sits beside a VUI admin app without looking like a different product.

How do I install it?

Build the theme, then upload the zip under Appearance → Themes → Add New → Upload Theme. There is no build step on the server and no bundler; it deploys the way every other WordPress theme does.

Terminal
pnpm --filter @viliha/vui-wp-theme zip
# writes packages/web/wp-theme/vui-wp-theme.zip

Requirements

WordPress 6.5 or later and PHP 8.1 or later. It is a block theme, so the site editor is required. There is no classic-theme fallback and none is implied.

What is generated, and what is written by hand?

The design is generated; the layout is authored. That split is what stops WordPress becoming a second design system that drifts from the first.

  • Generated from theme.css: theme.json (the colour palette, the fluid type scale, the spacing rhythm, the layout widths and the elevation ramp) and style.css (the WordPress header plus the compiled stylesheet).
  • Written by hand: the patterns, templates, parts and functions.php.

Change a token and rebuild, and WordPress follows. A test fails if the generator stops tracking the source, so the two cannot quietly diverge.

Why are the patterns not generated from the React blocks?

Because a rendered block is one opaque box. Running the React blocks through a renderer produces HTML, and HTML dropped into a wp:html block cannot be edited in the site editor, which is the entire reason someone chooses a block theme. The patterns are real WordPress block markup, so every headline and paragraph is editable. They still cannot drift, because they use the same classes and the same theme.json presets.

What patterns come with it?

Fifteen, under a VUI category in the inserter: hero, features, feature split, stats, logos, testimonials, pricing, process, FAQ, team, timeline, posts, article, contact, newsletter and call to action.

💡 The forms submit nowhere until you wire them

WordPress has no core form block, and a theme that depends on a form plugin is worse than one that ships the markup. The contact and newsletter patterns carry a styled form in a wp:html block and say on the page that it is not connected. Set an action, or delete the block and insert your form plugin's.

How do I change the colours?

In the site editor under Styles. Every colour is a preset generated from a token, so changing one repaints the whole site rather than one block. To change the defaults for everyone, edit the token in packages/web/ui/react/src/theme.css and rebuild.

packages/web/ui/react/src/theme.css
:root {
  --brand: #266df0;   /* becomes the "primary" preset in theme.json */
}

What needs JavaScript?

Almost nothing, and the theme is explicit about which parts do.

  • Nothing at all for the FAQ. It is a <details> element, so opening, closing, keyboard operation and screen-reader semantics come from the browser. Every answer is in the HTML, which is also what lets a search engine quote one.
  • WordPress core blocks for navigation, search, the query loop and pagination. Theirs are good; this theme does not reimplement them.
  • Alpine, enqueued deferred and only on the front end, for the carousel, the mega menu, the cookie banner and copy-to-clipboard.

Can I use VUI for the WordPress admin?

Two ways, and they solve different problems.

  • Headless. Point the VUI admin app at the WordPress REST API. The three-layer architecture exists for this: swap the mock bodies in lib/api/<entity>.ts for fetch calls and the controllers and views are untouched. You get the datatable, the record forms and the charts over WordPress content.
  • A skin plugin that restyles wp-admin itself, for teams who live in the WordPress dashboard. Planned rather than shipped, and worth knowing that it is a maintenance commitment: wp-admin changes between releases, so a skin is re-tested every time.

What licence is it under?

The PHP is GPL-2.0-or-later, because WordPress requires it: the WordPress Foundation treats PHP that calls WordPress as a derivative work. The CSS, JavaScript and design assets are licensed separately. That split is what every commercial theme shop does, and it is stated in the theme header rather than left to be inferred.