README

UX Blocks Core

Atomic Symfony UX Twig components with registry-aligned markup and role CSS

Note

Read-only mirror. See CONTRIBUTING.md for how to propose changes.

Features

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.yaml revision 1.4 with blocks.* 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

Interaction profile

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

Component inventory

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/.

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.

Install ui-kernel (theme CSS). ux-blocks (registry SDK) resolves from Packagist as a dependency of this package.

composer require symfinity/ui-kernel

Installation

composer require symfinity/ux-blocks-core

The Flex recipe registers the bundle for all environments. See Installation.

Quick Start

{# 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.

Documentation

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

symfinity / ux-blocks-core

Maintainers

Package info

Statistics

Security