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. For the complete official catalog, use symfinity/ux-blocks-full.

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

Fund package maintenance!

Statistics

Security