Build WordPress pages fast.
Then build the app behind them.
Start with 192 ready-made components and 18 whole pages, or let the Page creator build a page and its header, sidebar and footer in one go. Everything it inserts is ordinary blocks you edit as normal. Underneath is the rest of the platform: utility-first CSS, a declarative data layer bound to your own tables, no-code forms, automation flows, email 2FA, auto REST APIs and WooCommerce styling. All from the admin. No build step, and no JavaScript to write.
Everything you need to build with WordPress
Pages in minutes from a real component library, and a complete app-building platform under them — all inside WordPress, all from the admin.
192 Components, 23 Groups
Buttons, heroes, headers, cards, lists, grids, features, pricing, testimonials, sections, screens in a browser or a phone, carousels, charts, fields, forms, data, navigation and footers — plus 18 whole pages to start from, two of them a whole first screen: an app home and a launch page, both drawing real charts. Pick one, choose a style, a size and light or dark, and watch it render before you commit. Insert, and it becomes ordinary blocks: no instance to break, nothing to keep in sync. See all 192 rendered →
Page Creator
A page and the chrome around it in one go. Say what kind of page it is and the form fills itself in — an app bar and a column down the side, or a header and a footer, with something to start from. Name it, set each part’s width, side and room, and press the button: the page, the areas and the bindings between them are made together. The preview beside the form is the real page at desktop, tablet or phone width.
2,076+ Utility Classes
Spacing, typography, flex, grid, borders, shadows, transitions, animations, transforms, filters — everything you need, ready to use out of the box. Browse every class →
Charts That Are a Block
The UCM Chart block draws with Chart.js. Pick a preset — bars, line, filled line, doughnut, stacked bars, radar — and it is already in your palette, because every preset is written with {color:primary} where a colour goes and {t:"Orders"} where a word goes. Open the config and it is ordinary Chart.js, so anything Chart.js draws, this draws. Point it at a data source and the rows become the bars — read through the source, so a visitor sees only the rows they may. The chart below is one of these blocks.
A Real Code Editor
Wherever UCM takes code, it gives you an editor rather than a textarea — the HTML block, the Script block, the Chart block’s config, the Scripts screen, custom CSS, email templates and flow actions. Highlighting, line numbers, bracket matching, a wrap toggle, and your own class names autocompleting inside class="…" from the same registry the picker reads, so it can only suggest a class you actually have. Detach floats it over the page when the sidebar is too narrow to think in.
Live Editor Preview
Every class renders immediately in the Gutenberg canvas. What you see is what you get — no guessing.
Theme Color System
Define your brand colors as CSS variables. UCM auto-generates semantic text-primary, bg-accent — and all their variants.
Custom Data Tables
Create MySQL tables from the admin — no SQL required. Each table gets a full CRUD REST API at /ucm/v1/data/{table} the moment you hit Save.
Permission Rules (RLS)
Build AND/OR condition trees visually per role and operation. The server compiles them into safe parameterised SQL WHERE clauses — the client only ever sees authorised rows.
Typed User Fields
Define custom user metadata with six types (integer, string, boolean, number, array, object). Each field has a role-based “Visible to” picker — private fields are stripped server-side before the REST response leaves WordPress.
WooCommerce Store API
Build fully custom shop pages with UCM.woo — product grids, cart, checkout, and Stripe payments, all from Script blocks. No template overrides, no PHP. WooCommerce handles the backend; you control the design.
Zero-Bloat Starter Theme
Install UCM Theme from the admin in one click — a blank canvas with no bundled CSS, fonts or JavaScript to fight your utility classes. WooCommerce shop, cart, checkout and account pages work out of the box. Your design lives entirely in UCM classes and Areas.
Responsive Variants
Every class gets sm: → 2xl: responsive prefixes automatically. Build truly adaptive layouts.
UCM.js Runtime
UCM.fetch() for authenticated REST, UCM.user for server-side identity, UCM.parseMeta() for typed user meta — all available in Script blocks with zero imports.
URL Rewrites
Pattern-based URL routing with {placeholder} variables. Parameters are injected into UCM.route on the frontend — no custom PHP needed.
No-Code Form Builder
Build Gutenberg forms with a drag-and-drop field editor — text, email, number, phone, textarea, select, radio, checkbox, file and hidden fields. Submit to a UCM Data Table or any external URL. Save to a form library and reuse across pages. Light/dark style presets and five independent CSS class slots per element.
Forms That Take Files
A File field says where the upload goes, what it is renamed to — including the id of the row it belongs to — and what is done to it on the way: resized, cropped, converted to WebP, stripped of the EXIF that says where a phone photo was taken. It is sent the moment it is chosen, so a picture that is refused says so beside the field and the resizing is finished before anybody presses Send. Public, private, or kept in the row itself as a data: URI.
Security Checks on Uploads
What a file is comes from its bytes, never from its name: a script called shot.jpg is refused, and so is a picture with code hidden behind it. On top of that a field can ask for checks of what is inside — no macros in a document, no JavaScript in a PDF, no archive that unpacks outside itself, no markup in something that should be plain text. Every SVG is read for scripts and refused if it has any, and that one cannot be switched off. Your own check is a function in your own plugin.
Automation Flows
Visual Trigger → Condition → Action engine. Fire on form submit, user login, registration, WooCommerce order, Data Table events, or schedule. Actions: assign roles, set user meta, send email, webhook POST, create user, insert rows. Use {form.field_name} tokens from form data in any action.
Secure Auth & 2FA
Replace the default WordPress login with a branded [ucm_login] shortcode page. Add email two-factor authentication: after a correct password, a 6-digit code is emailed and must be entered on the [ucm_verify] page. Configurable expiry, max attempts, and redirect URL.
WooCommerce Page Styling
Assign UCM utility classes to 70+ named element slots across Shop, Product, Cart, Checkout, and My Account pages — no template overrides, no raw CSS. One-click Light and Dark presets fill every slot instantly using your Theme Color variables. Per-page visibility rules with automatic redirect enforcement.
HTTP Security Headers
Harden your site in minutes. Choose a preset (Loose / Standard / Strict) to apply X-Frame-Options, Referrer-Policy, Permissions-Policy, HSTS, COOP, CORP, and COEP. Build a custom Content Security Policy directive-by-directive with a visual pill-tag editor. Also includes WordPress hardening: disable XML-RPC and hide the WP version number. When your own policy blocks a font or a library, a notice names it and offers to allow it in one click. Free on every install.
Data Sources & Binding
Define a query once in the admin — table, projection, relations, roles and the exact sorting, searching and filtering it permits — then bind blocks to it by name with data-source. Lists, detail views, search and paging are attributes on ordinary blocks, not code.
Server Preload & State Views
Rows are resolved during render and embedded in the page, so the browser makes no request at all. Loading, empty and error views are designed like any other block — and skeletons size themselves from the source’s own fixture.
Data Views, No Code
Pick a source and a layout — table, cards, list, board, detail, products, form, chart, figures, feed or cart — and get finished, connected blocks: search, filters, sorting and paging, Edit and Delete on each row, a board whose cards drag between lanes, a cart with its total. Then choose how it looks: striped or boxed, cards per row, compact, a table that scrolls sideways on a phone, fields side by side.
Headers That Change as You Scroll
Sticky, or transparent over a picture until the page moves and then a light or a dark bar. Light words over a dark top, and a logo for each background, shown whichever fits. Every choice is one class, set from the header’s own panel.
Every Word in Their Language
Blocks, forms and the plugin’s own messages — a file too big, a script refused, a dropdown still loading — come through your translations, with Finnish included. A release that adds words brings their translations to every site that already has the language.
Transactional Email
Send site mail through a real service without a second plugin. Ready-made settings for Postmark, Brevo, Mailgun, SendGrid, Amazon SES and Gmail — each carrying the credential detail that usually breaks setup. A log-only mode captures every message and lets nothing leave the server, so a staging copy of a live database cannot email your real customers.
Analytics, No Code
Google Analytics 4 from a measurement ID — no snippet pasted into a theme, and nothing to remove later. Consent Mode starts denied, Do Not Track is honoured in the browser before any request is made, and IP anonymisation is on by default. The origins it needs are registered with your security policy automatically.
Purchases That Grant Access
Mark a WooCommerce product as an application product and a paid order creates the customer’s account, assigns a role, tops up credits or any user field, and can fire a Flow. Grants scale with quantity, variations carry their own, and a refund takes it back — floored at zero if they have already spent some.
From zero to styled in minutes
No build pipeline. No custom PostCSS. No configuration.
Define a class
Open UCM Builder, pick a CSS property and value, give it a name. Done.
Apply anywhere
Type ucm-{class} on any block. The editor previews it live.
Ship minimal CSS
UCM scans content and outputs only the rules you actually use — zero dead code.
Build a page. Then style it.
The frame below is two real pages the Page creator built — not a picture of them. Switch between an application and a website, and switch the theme: light and dark are classes, which is why nothing has to be rebuilt to change one.
Both pages are made of the same components you can look through on the components page — all 192 of them, rendered rather than described.
And every class is a switch, in the editor and here.
Each button below toggles a real UCM utility class on the preview card. This is exactly how it works in the Gutenberg editor.
Background
ucm-bg-primaryucm-bg-secondaryucm-bg-whiteucm-bg-transparentText color
ucm-text-whiteucm-text-blackucm-text-primarySecondary text color
ucm-text-blackucm-text-primaryucm-text-secondaryPadding
ucm-p-2ucm-p-4ucm-p-6ucm-p-8ucm-p-12Border radius
ucm-rounded-noneucm-roundeducm-rounded-lgucm-rounded-xlucm-rounded-2xlucm-rounded-fullShadow
ucm-shadow-noneucm-shadowucm-shadow-lgucm-shadow-xlucm-shadow-2xlFont weight
ucm-font-normalucm-font-semibolducm-font-bolducm-font-extraboldA real application, built this way.
Agency Hub is a working project-management app — clients, projects, tasks, time logs, billing and messages, with three roles and row-level security. Every screen is Gutenberg blocks bound to data sources. No page templates, no build step, and no JavaScript written for any of it.
No sign-up. The role switcher is in the top bar — nothing you do there affects anyone else’s session.
No code required. Not code forbidden.
Everything above is markup and settings. When you need more, the runtime is a documented API and WordPress is still WordPress — you are never locked out of your own site.
A runtime you can call
The JavaScript that powers binding is a public API. Re-resolve a source, read the loaded rows, react to a write — without rebuilding any of the plumbing yourself.
UCM.data.refresh('projects');
UCM.data.rows('projects');
document.addEventListener(
'ucm:write', e => { … }
);
Register your own
Formatters and widgets are registries. Add a currency, a date style, or a whole custom cell renderer, and it becomes available to every block through data-format like a built-in.
UCM.registerFormat('eur',
v => new Intl.NumberFormat(
'fi-FI', { style:'currency',
currency:'EUR' }).format(v)
);
Plain PHP, plain WordPress
Sources, writes and flows fire ordinary hooks. Add server-side validation, compute a column, or call an external service — in a normal plugin file, with the whole WordPress API available.
add_action(
'ucm_data_created',
function ( $row, $source ) {
// your code
}, 10, 2
);
Your AI agent already knows how to use it
UCM Studio ships UCM-AI-GUIDE.md in the plugin folder — a 1,300-line prescriptive reference covering the CSS pipeline, block structure, the data vocabulary and the traps that fail silently. Point Claude Code, Cursor or Copilot at it and they build the way the plugin expects instead of guessing.
Read UCM-AI-GUIDE.md before making any change to the WordPress site or to UCM Studio.
The demo application shipped with UCM Studio — fifteen screens, roles, boards and forms — is built without any of this. It is here for the day you need it.
One plugin. A complete platform.
Start free. Upgrade to Pro when you’re ready to build real applications — databases, APIs, access control, and more.
Free
Free forever. No credit card required.
The best free CSS toolkit for WordPress.
- 2,076+ utility classes out of the box
- Live Gutenberg block editor preview
- Usage-based CSS — only what you use
- UCM Theme — zero-bloat canvas, WooCommerce-ready, one-click install
- Components & tag defaults — bundle utilities under one name
- Import & Export — classes, settings, Areas, scripts & translations
- 5 configurable breakpoints
- Hover, focus & focus-visible variants
- HTTP security headers, CSP & WordPress hardening
- AI Agent Guide — ships in the plugin folder
- Custom prefix — make it yours
billed $149/yr — or $19/mo monthly
CSS studio + complete app-building platform. Build full WordPress applications — no PHP required.
- — UCM App Builder
- Data Sources — queries defined in the admin, bound to blocks by name
- Declarative binding — lists, detail views, search, sort, filter & paging
- Server preload — rows embedded at render, no request from the browser
- State views & skeletons — loading, empty and error designed as blocks
- Transforms — compute, filter, sort, group and limit without SQL
- Popups — any page opened as a dialog
- Behaviours — tabs, dialogs, charts and drag-and-drop boards
- UCM Forms — no-code form builder, library, style presets, Flow trigger on submit
- UCM Flows — visual Trigger → Condition → Action automation engine
- UCM Auth — branded login page + email 2FA ([ucm_login] & [ucm_verify])
- WooCommerce Pages — 70+ element slots, one-click Light/Dark presets
- Custom Data Tables — build MySQL tables, get a full REST API instantly
- Permission Rules — visual row-level security, compiled to safe SQL
- Typed User Fields — 6 types, role-based REST visibility
- Role Manager — CRUD permissions per WordPress role
- UCM.js — fetch, user identity, parseMeta, URL routing
- URL Rewrites — pattern-based routing, no PHP needed
- WooCommerce Store API — custom shop, cart & Stripe checkout
- Purchases that grant access — accounts, roles, credits & Flows from a paid order
- UCM SMTP — Postmark, Brevo, Mailgun, SendGrid, SES, Gmail + log-only mode
- UCM Analytics — GA4 from a measurement ID, consent mode & Do Not Track
- Application packages — export a whole app as one portable file
- — CSS Pro
- Everything in Free
- Reusable header & footer Areas
- Per-page JS Scripts (stored on disk)
- Site Fonts — custom WOFF2 upload + CSS vars
- Theme Colors, Greyscale & Full Colour palettes
- Translations — multilingual block content & form strings
- Priority support & early access to new features