twig-component

Solid

Symfony UX TwigComponent for reusable UI building blocks -- server-rendered components with PHP classes and Twig templates. Use when creating buttons, cards, alerts, badges, navbars, or any reusable UI element with props, blocks/slots, computed properties, or anonymous (template-only) components. Code triggers: AsTwigComponent, #[AsTwigComponent], ExposeInTemplate, PreMount, PostMount, <twig:Alert />, <twig:Button>, component(), computed properties, anonymous component, HTML syntax. Also trigger when the user asks "how to create a reusable component", "how to make a component library", "how to pass props to a component", "how to use slots/blocks in a component", "how to build a design system in Symfony", "what is the HTML syntax for components", "how to create a component without a PHP class". Do NOT trigger for components that re-render dynamically on user input (use live-component), for JS behavior (use stimulus), or for page navigation (use turbo).

Web & Frontend 158 stars 11 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 90/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# TwigComponent Reusable UI components with PHP classes + Twig templates. Think React/Vue components, but server-rendered with zero JavaScript. Two flavors exist: **class components** (PHP class + Twig template) for components that need logic, services, or computed properties, and **anonymous components** (Twig-only, no PHP class) for simple presentational elements. ## When to Use TwigComponent Use TwigComponent when you need reusable markup with props but no server re-rendering after the initial render. If the component needs to react to user input (re-render via AJAX, data binding, actions), use LiveComponent instead. Good candidates: buttons, alerts, cards, badges, icons, form widgets, layout sections, navigation items, table rows, modals (structure only). ## Installation ```bash composer require symfony/ux-twig-component ``` ## Class Component A PHP class annotated with `#[AsTwigComponent]` paired with a Twig template. ```php // src/Twig/Components/Alert.php namespace App\Twig\Components; use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; #[AsTwigComponent] final class Alert { public string $type = 'info'; public string $message; public bool $dismissible = false; } ``` ```twig {# templates/components/Alert.html.twig #} <div class="alert alert-{{ type }}" {{ attributes }}> {{ message }} {% if dismissible %} <button type="button" class="close">×</button> {% endif %} </div> ``` ```twig {# Usage #} <twig:Alert type="suc...