Note
Read-only mirror. See CONTRIBUTING.md for how to propose changes.
- Design tokens — color, spacing, radius, motion, and focus CSS variables from theme packs
- Built-in themes — Balanced, Semantic, and Utility lineages with light and dark variants
- Twig integration —
ui_kernel_css(), theme boot script, and theme shell helpers - Slim kernel boundary — theme CSS only; component styles ship in
ux-blocks-*packages - Flex recipe — bundle and default config wired on install
Add the symfinity/recipes Flex endpoint to your project's composer.json (see recipes README) — recipes are not in Symfony's official recipe repository yet.
composer require symfinity/ui-kernelThe Flex recipe registers the bundle for all environments and copies a minimal app config. See Installation.
{# templates/base.html.twig #}
<head>
{{ ui_kernel_theme_boot_script() }}
{{ ui_kernel_css()|raw }}
</head># config/packages/symfinity_ui_kernel.yaml
symfinity_ui_kernel:
default_theme: semantic
default_variant: semanticSee Quick start for the full walkthrough.
- Quick start — theme CSS on every page in minutes
- Installation — Flex, manual setup, Web Profiler (dev)
- Configuration — app wiring, user tokens, system profile
- Usage — daily layout and override patterns
- Themes — built-in lineages, dark mode, and theme packs
- Reference — config root, DTCG layout, and entry points
- Troubleshooting — stale CSS, upgrades, Web Profiler
- Font Manager pairing — optional webfonts
- PHP 8.2 or higher
- Symfony 6.4, 7.x, or 8.x
- Twig 3.0 or higher