PHPackages                             symfinity/ux-blocks-core - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. symfinity/ux-blocks-core

ActiveSymfony-bundle[Templating & Views](/categories/templating)

symfinity/ux-blocks-core
========================

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

v0.1.6(3w ago)09899MITPHPPHP >=8.2CI passing

Since Jun 23Pushed 3w agoCompare

[ Source](https://github.com/symfinity/ux-blocks-core)[ Packagist](https://packagist.org/packages/symfinity/ux-blocks-core)[ Docs](https://github.com/symfinity/ux-blocks-core)[ GitHub Sponsors](https://github.com/sponsors/serotoninja)[ RSS](/packages/symfinity-ux-blocks-core/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (7)Dependencies (33)Versions (8)Used By (9)

UX Blocks Core
==============

[](#ux-blocks-core)

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

[](#atomic-ux-twig-components-with-registry-aligned-markup-and-role-css)

[![PHP Version](https://camo.githubusercontent.com/fe60a3918bae3bc2ed56c6c5329ac0cb7462196b3061d0afb91fc4a241fe4172/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322b2d3737374242343f7374796c653d666c6174266c6f676f3d706870266c6f676f436f6c6f723d7768697465)](composer.json)[![Symfony](https://camo.githubusercontent.com/0b9a123c2224a4e7dbbb624492f493b4fbb810e2060e7ddbec9346b13a65ac24/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53796d666f6e792d372e342b2d3334333433343f7374796c653d666c6174266c6f676f3d73796d666f6e79266c6f676f436f6c6f723d7768697465)](composer.json)
[![CI](https://github.com/symfinity/ux-blocks-core/actions/workflows/ci.yml/badge.svg)](https://github.com/symfinity/ux-blocks-core/actions/workflows/ci.yml)
[![Release](https://camo.githubusercontent.com/c9a47b501994d5d6592ff8d9dbebbf61bba75285c9588d0d97b593a52f807262/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f73796d66696e6974792f75782d626c6f636b732d636f72652e7376673f7374796c653d666c6174266c6f676f3d7061636b6167697374266c6f676f436f6c6f723d7768697465)](https://packagist.org/packages/symfinity/ux-blocks-core)[![Downloads](https://camo.githubusercontent.com/8329259559243785e23eee3f5e212f29494bbbd3e0a7ddc8791f068ac95de713/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f73796d66696e6974792f75782d626c6f636b732d636f72652e7376673f7374796c653d666c6174266c6f676f3d7061636b6167697374266c6f676f436f6c6f723d7768697465)](https://packagist.org/packages/symfinity/ux-blocks-core)[![License](https://camo.githubusercontent.com/f48f8d6cf609f5b181b9c3218a85175fe8a5809c7ea400347f39697a5d55065d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e7376673f7374796c653d666c6174)](LICENSE)

Note

**Read-only mirror.**See [CONTRIBUTING.md](CONTRIBUTING.md) for how to propose changes.

Features
--------

[](#features)

- **25 atomic roles** — typography, headings, layout, navigation, 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** — ``, ``, ``, and siblings
- **Package role CSS** — tier-owned styles under `assets/styles/roles/`
- **Flex recipe** — bundle + AssetMapper paths wired on install

Form field roles (`Label`, `Input`, …) ship in [`symfinity/ux-blocks-form`](https://github.com/symfinity/ux-blocks-form).

Interaction profile
-------------------

[](#interaction-profile)

TokenIn this package`nat`Default for all roles — native HTML + ui-kernel / package CSS`act`Optional on `Button` and `Pagination` via ui-action protocol`stl`**Not included** — overlay components ship in `symfinity/ux-blocks-extended``live`**Not included** — LiveComponents ship in separate packagesComponent inventory
-------------------

[](#component-inventory)

RoleTwigInteractionFragmentStatustypographyTypographynat`blocks.typography`shippedbuttonButtonnat, act`blocks.button`shippedseparatorSeparatornat`blocks.separator`shippeddividerDividernat`blocks.divider`shippedaspect-ratioAspectRationat`blocks.aspect-ratio`shippedscroll-areaScrollAreanat`blocks.scroll-area`shippedbadgeBadgenat`blocks.badge`shippedavatarAvatarnat`blocks.avatar`shippedkbdKbdnat`blocks.kbd`shippedlinkLinknat`blocks.link`shippedprogressProgressnat`blocks.progress`shippedspinnerSpinnernat`blocks.spinner`shippedskeletonSkeletonnat`blocks.skeleton`shippedimageImagenat`blocks.image`shippedfigureFigurenat`blocks.figure`shippedflashFlashnat`blocks.flash`shippedflash-stackFlashStacknat`blocks.flash-stack`shippedpage-headingPageHeadingnat`blocks.page-heading`shippedsection-headingSectionHeadingnat`blocks.section-heading`shippedgridGridnat`blocks.grid`shippedstackStacknat`blocks.stack`shippedlistListnat`blocks.list`shippedbreadcrumbBreadcrumbnat`blocks.breadcrumb`shippedpaginationPaginationnat, act`blocks.pagination`shippedbutton-groupButtonGroupnat`blocks.button-group`shipped**Highlights:** variant and appearance CSS on **Button**, **Badge**, and **Link**; icon slots on actions, links, flashes, and headings; optional decorative icon watermark on **Flash**; solid **Button** elevation with hover lift (respects `prefers-reduced-motion`).

Handbook: [docs/components.md](docs/components.md) and [docs/components/](docs/components/).

Prerequisites
-------------

[](#prerequisites)

Add the [symfinity/recipes](https://github.com/symfinity/recipes) Flex endpoint to your project's `composer.json` (see [recipes README](https://github.com/symfinity/recipes/blob/main/README.md)) — recipes are not in Symfony's official recipe repository yet.

**ux-blocks** (registry SDK) resolves from [Packagist](https://packagist.org/packages/symfinity/ux-blocks) as a dependency of this package. For **themed** apps, optionally install **ui-kernel**:

```
composer require symfinity/ui-kernel   # optional
```

Installation
------------

[](#installation)

```
composer require symfinity/ux-blocks-core
```

The Flex recipe registers the bundle for all environments. See [Installation](docs/installation.md) and the [UX Blocks install profiles](https://github.com/symfinity/ux-blocks#install-profiles) for headless vs themed vs full-app choices.

For the **complete official catalog** (core, form, extended, interactive, live), use [`symfinity/ux-blocks-full`](https://github.com/symfinity/ux-blocks-full) instead of installing tiers individually.

Quick Start
-----------

[](#quick-start)

```
{# templates/base.html.twig — ui-kernel head (required) #}

    {{ ui_kernel_theme_boot_script() }}
    {{ ui_kernel_css()|raw }}

```

```
{# templates/demo.html.twig #}

Save
Draft
```

```
{# templates/base.html.twig — session flashes (viewport top) #}

  {% for message in app.flashes('success') %}
    {{ message }}
  {% endfor %}
  {% for message in app.flashes('error') %}
    {{ message }}
  {% endfor %}

```

See [Quick start](docs/quickstart.md) for the full walkthrough. For forms, add [`symfinity/ux-blocks-form`](https://github.com/symfinity/ux-blocks-form).

Documentation
-------------

[](#documentation)

- **[Quick start](docs/quickstart.md)** — ui-kernel + first components in minutes
- **[Installation](docs/installation.md)** — Flex, dependencies, verify
- **[Configuration](docs/configuration.md)** — auto-wiring; no bundled routes
- **[Components](docs/components.md)** — role index and fragment prefix
- **[Upgrade](docs/upgrade.md)** — first release and future migrations

Typography browser support
--------------------------

[](#typography-browser-support)

Heading and display typography use progressive enhancement where the browser supports it:

FeatureSupporting browsers (enhanced path)Fallback`text-wrap: balance`Chromium 114+, Firefox 121+, Safari 17.5+Normal wrap — layout unchanged`text-wrap: pretty`Chromium 117+, Firefox 121+, Safari 17.5+Normal wrap on prose container`text-box-trim` / `text-box-edge`Chromium 133+, Safari 18.2+Pre-trim spacing from design tokensMixed-script and CJK headlines may hit engine line caps (Chromium ~6 lines, Firefox ~10) — balance degrades to normal wrap without breakage. `Typography:Muted` intentionally skips trim to preserve descenders on helper text.

Requirements
------------

[](#requirements)

- PHP 8.2 or higher
- Symfony 7.4 or 8.x
- `symfinity/ui-kernel` ^0.1 and `symfinity/ux-blocks` ^0.1 ([Packagist](https://packagist.org/packages/symfinity/ux-blocks))

Support
-------

[](#support)

- [GitHub Issues](https://github.com/symfinity/ux-blocks-core/issues)
- [Security](.github/SECURITY.md)
- [Contributing](CONTRIBUTING.md)

License
-------

[](#license)

[MIT](LICENSE)

###  Health Score

44

—

FairBetter than 90% of packages

Maintenance95

Actively maintained with recent releases

Popularity20

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~2 days

Total

7

Last Release

24d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/246582257?v=4)[Symfinity](/maintainers/symfinity)[@symfinity](https://github.com/symfinity)

---

Tags

design-systemregistrysymfonysymfony-bundletwig-componentsux-blockssymfonysymfony-uxSymfony Bundledesign-systemtwig-componentsui-kernelux-blocks

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan

Type Coverage Yes

### Embed Badge

![Health badge](/badges/symfinity-ux-blocks-core/health.svg)

```
[![Health](https://phpackages.com/badges/symfinity-ux-blocks-core/health.svg)](https://phpackages.com/packages/symfinity-ux-blocks-core)
```

###  Alternatives

[easycorp/easyadmin-bundle

Admin generator for Symfony applications

4.3k17.9M402](/packages/easycorp-easyadmin-bundle)[sylius/sylius

E-Commerce platform for PHP, based on Symfony framework.

8.5k5.9M754](/packages/sylius-sylius)[shopware/core

Shopware platform is the core for all Shopware ecommerce products.

585.6M606](/packages/shopware-core)[2lenet/crudit-bundle

The easy like Crud'it Bundle.

1616.4k14](/packages/2lenet-crudit-bundle)[open-dxp/opendxp

Content & Product Management Framework (CMS/PIM)

9421.6k64](/packages/open-dxp-opendxp)[chameleon-system/chameleon-base

The Chameleon System core.

1028.7k5](/packages/chameleon-system-chameleon-base)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)