Note
Read-only mirror. See CONTRIBUTING.md for how to propose changes.
- 24 atomic roles — typography, forms, layout, feedback, and media primitives
- Native-first (
nat) — styled with ui-kernel tokens; no Stimulus required for default stories - Registry-aligned —
config/ux_roles.yamlrevision 1.4 withblocks.*fragment ids - Symfony UX Twig components —
<twig:Button>,<twig:Input>, and siblings - Package role CSS — tier-owned styles under
assets/styles/roles/ - Flex recipe — bundle + AssetMapper paths wired on install
| Token | In this package |
|---|---|
nat |
Default for all roles — native HTML + Chameleon kernel / package CSS |
act |
Optional on Button via ui-action protocol |
stl |
Not used — interactive overlays live in symfinity/ux-blocks-extended |
live |
Not used — LiveComponent demos live in lab / consumer apps |
| Role | Twig | Category | Interaction | Fragment | Status |
|---|---|---|---|---|---|
| typography | Typography | Typography | nat | blocks.typography |
shipped |
| button | Button | Actions | nat, act | blocks.button |
shipped |
| label | Label | Forms | nat | blocks.label |
shipped |
| input | Input | Forms | nat | blocks.input |
shipped |
| textarea | Textarea | Forms | nat | blocks.textarea |
shipped |
| checkbox | Checkbox | Forms | nat | blocks.checkbox |
shipped |
| radio-group | RadioGroup | Forms | nat | blocks.radio-group |
shipped |
| select | Select | Forms | nat | blocks.select |
shipped |
| switch | Switch | Forms | nat | blocks.switch |
shipped |
| file-input | FileInput | Forms | nat | blocks.file-input |
shipped |
| separator | Separator | Layout | nat | blocks.separator |
shipped |
| divider | Divider | Layout | nat | blocks.divider |
shipped |
| aspect-ratio | AspectRatio | Layout | nat | blocks.aspect-ratio |
shipped |
| scroll-area | ScrollArea | Layout | nat | blocks.scroll-area |
shipped |
| badge | Badge | Feedback | nat | blocks.badge |
shipped |
| progress | Progress | Feedback | nat | blocks.progress |
shipped |
| spinner | Spinner | Feedback | nat | blocks.spinner |
shipped |
| skeleton | Skeleton | Feedback | nat | blocks.skeleton |
shipped |
| empty | Empty | Feedback | nat | blocks.empty |
shipped |
| avatar | Avatar | Media | nat | blocks.avatar |
shipped |
| image | Image | Media | nat | blocks.image |
shipped |
| figure | Figure | Media | nat | blocks.figure |
shipped |
| kbd | Kbd | Typography | nat | blocks.kbd |
shipped |
| link | Link | Navigation | nat | blocks.link |
shipped |
Handbook pages: docs/components.md and docs/components/.
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.
Install ui-kernel (theme CSS). ux-blocks (registry SDK) resolves from Packagist as a dependency of this package.
composer require symfinity/ui-kernelcomposer require symfinity/ux-blocks-coreThe Flex recipe registers the bundle for all environments. See Installation.
{# templates/base.html.twig — ui-kernel head (required) #}
<head>
{{ ui_kernel_theme_boot_script() }}
{{ ui_kernel_css()|raw }}
</head>{# templates/demo.html.twig #}
<twig:Button variant="default">Save</twig:Button>
<twig:Label for="email">Email</twig:Label>
<twig:Input id="email" name="email" type="email" placeholder="you@example.com" />See Quick start for the full walkthrough.
- Quick start — ui-kernel + first components in minutes
- Installation — Flex, dependencies, verify
- Configuration — auto-wiring, catalog route, SchemeSwitch
- Components — role index and fragment prefix
- Upgrade — first release and future migrations
- PHP 8.2 or higher
- Symfony 7.4 or 8.x
symfinity/ui-kernel^0.1 andsymfinity/ux-blocks^0.1 (Packagist)