README

UX Blocks Extended

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

Note

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

Features

21 compound roles — cards, alerts, layout shells, navigation, data chrome, and search forms
Native-first (nat) — styled with ui-kernel tokens; optional act on dashboard shell
Composition language — scalar attrs plus universal region components from core
Registry-aligned — blocks.ext.* fragment ids in config/ux_roles.yaml
Symfony UX Twig components — <twig:Card>, <twig:Alert>, <twig:AppShell>, and siblings
Package role CSS — tier-owned styles under assets/styles/roles/
Flex recipe — bundle and AssetMapper paths wired on install

Interaction profile

Token	In this package
`nat`	Default for compounds — native HTML + ui-kernel / package CSS
`act`	Optional on `DashboardShell` via ui-action protocol
`stl`	Not included — interactive overlays ship in `symfinity/ux-blocks-interactive`
`live`	Not included — LiveComponents ship in `symfinity/ux-blocks-live`

Component inventory

Role	Twig	Interaction	Fragment	Status
card	Card	nat	`blocks.ext.card`	shipped
table	Table	nat	`blocks.ext.table`	shipped
alert	Alert	nat	`blocks.ext.alert`	shipped
description-list	DescriptionList	nat	`blocks.ext.description-list`	shipped
stat	Stat	nat	`blocks.ext.stat`	shipped
timeline	Timeline	nat	`blocks.ext.timeline`	shipped
accordion	Accordion	nat	`blocks.ext.accordion`	shipped
carousel	Carousel	nat	`blocks.ext.carousel`	shipped
dialog	Dialog	nat	`blocks.ext.dialog`	shipped
popover	Popover	nat	`blocks.ext.popover`	shipped
tooltip	Tooltip	nat	`blocks.ext.tooltip`	shipped
navbar	Navbar	nat	`blocks.ext.navbar`	shipped
steps	Steps	nat	`blocks.ext.steps`	shipped
auth-layout	AuthLayout	nat	`blocks.ext.auth-layout`	shipped
dashboard-shell	DashboardShell	nat, act	`blocks.ext.dashboard-shell`	shipped
app-shell	AppShell	nat	`blocks.ext.app-shell`	shipped
page-header	PageHeader	nat	`blocks.ext.page-header`	shipped
data-table-chrome	DataTableChrome	nat	`blocks.ext.data-table-chrome`	shipped
empty	Empty	nat	`blocks.ext.empty`	shipped
bento-box-panel	BentoBoxPanel	nat	`blocks.ext.bento-box-panel`	shipped
search-form	SearchForm	nat	`blocks.ext.search-form`	shipped

Highlights: app shell and page header for product chrome; bento box panel for category landing; search-form for toolbar filters; data-table chrome for list/detail layouts. Handbook: docs/components.md.

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

Requires core (and form for field compounds). See UX Blocks install profiles for tier choices.

composer require symfinity/ux-blocks-extended

See Installation.

Quick Start

<twig:PageHeader title="Settings" description="Manage your account." />
<twig:Card>
  <twig:Header>Notifications</twig:Header>
  <twig:Actions>
    <twig:Button variant="default">Save</twig:Button>
  </twig:Actions>
</twig:Card>

See Quick start for the full walkthrough.

Documentation

Quick start — minimal setup path
Installation — Flex, dependencies, verify
Configuration — bundle and app options
Components — role index and examples
Usage — layout shells, composition language, search UI
Upgrade — version migrations
Troubleshooting — common fixes

symfinity / ux-blocks-extended

Maintainers

Package info

Statistics

Security