Search by 
symfinity / ui-kernel
Design tokens, themes, and slim CSS generation for Symfony
Maintainers
Fund package maintenance!
v0.2.2
2026-06-29 00:45 UTC
Requires
- php: >=8.2
- symfony/config: ^6.4||^7.0||^8.0
- symfony/dependency-injection: ^6.4||^7.0||^8.0
- symfony/framework-bundle: ^6.4||^7.0||^8.0
- symfony/http-foundation: ^6.4||^7.0||^8.0
- symfony/http-kernel: ^6.4||^7.0||^8.0
- symfony/twig-bundle: ^6.4||^7.0||^8.0
- symfony/yaml: ^6.4||^7.0||^8.0
- twig/twig: ^3.0
Requires (Dev)
- phpstan/phpstan: ^2.1
- phpstan/phpstan-symfony: ^2.0
- phpunit/phpunit: ^10.5 || ^11.0
Suggests
- symfinity/font-manager: Optional webfont loading — pair css_variables export with --ui-font-family-sans / --ui-font-family-mono (see docs/font-manager-pairing.md)
- symfinity/ux-blocks-demo: Browser theme galleries and kernel showcase routes (dev/test only)
- symfony/web-profiler-bundle: Dev-only Web Profiler toolbar and panel for theme/CSS observability (UiKernelDataCollector)
README
UI Kernel
Design tokens, themes, and slim CSS generation for Symfony
Note
Read-only mirror. See CONTRIBUTING.md for how to propose changes.
Features
- 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
Prerequisites
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.
Installation
composer require symfinity/ui-kernel
The Flex recipe registers the bundle for all environments and copies a minimal app config. See Installation.
Quick Start
{# 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: semantic
See Quick start for the full walkthrough.
Documentation
- 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
Requirements
- PHP 8.2 or higher
- Symfony 6.4, 7.x, or 8.x
- Twig 3.0 or higher