Choosing a UI Framework (none / Tailwind / Bootstrap)
One config setting decides how every grid, form, and button on the whole install is styled.
XcrudConfig::$ui
Every visual choice xCRUD Nova Pro makes - button classes, table borders, modal chrome, form control styling - is driven by a single string switch in src/Config.php:
public static string $ui = 'tailwind';| Value | Description |
|---|---|
'none' | Built-in, zero-dependency "paper ledger" theme - its own hand-written CSS using custom properties (--xcrud-pine, --xcrud-radius, and friends), no CDN requests at all. |
'tailwind' | Loads the Tailwind CDN build plus Google Fonts (Inter for UI text, JetBrains Mono for monospace/code). This is the default. |
'bootstrap' | Bootstrap-flavored classes and components, loaded from CDN. |
It's global, not per-page
Unlike most Xcrud settings, $ui has no per-widget override - there is no ->ui('bootstrap') call on the Xcrud class. Every page, every widget, every theme-aware helper (Xcrud::uiAssets(), the JS window.Xcrud globals) reads the same install-wide value. Changing it re-styles the entire application at once, which is the point - a mixed-theme install would mean shipping multiple copies of CDN CSS/JS to the same page for no benefit.
How a theme is structured
Each value of $ui maps to a folder under themes/{ui}/:
| File | Purpose |
|---|---|
theme.js | A class-string map the client-side widget reads at construction time - registers into window.XcrudThemes[ui], and must load before core/xcrud.js itself. |
assets.php (optional) | Anything extra the theme needs in <head> - CDN <script>/<link> tags, Google Fonts links, framework config. A theme with nothing extra (like 'none', which only needs its own xcrud.css) can skip this file entirely. |
Both files are emitted automatically by render() for a normal widget page. A widget-less page that still wants the theme's assets (a custom button, a standalone toast) calls Xcrud::uiAssets() directly - see Decoupled Frontends & CORS for that pattern.
<script src="themes/<?= XcrudConfig::$ui ?>/theme.js"></script>
<?= Xcrud::uiAssets() ?>Choosing one
Pick 'none' for a zero-dependency install (no CDN reachability required, smallest payload), 'tailwind' if your own site already leans on utility classes or you want the default look with no setup, and 'bootstrap' if the rest of your application is already Bootstrap-based and you want the CRUD screens to visually match it.