twig-component
TwigComponent enables you to compose reusable UI building blocks by pairing PHP classes with Twig templates, rendered server-side with zero JavaScript overhead. Define props, blocks, and computed properties to create everything from simple buttons to complex layout sections. Use class components for logic-heavy elements or anonymous Twig-only components for presentational markup.
TwigComponent lets you build server-rendered reusable UI components using PHP classes paired with Twig templates.
AI-generated summary based on this skill's SKILL.md
Install
smnandre/symfony-ux-skills/twig-component
git clone https://github.com/smnandre/symfony-ux-skills
cp -r symfony-ux-skills/skills/twig-component ~/.claude/skills/twig-componentFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to create reusable UI components in Symfony?
TwigComponent lets you build reusable UI blocks by pairing PHP classes with Twig templates. Create a PHP class (e.g., `Button`) with properties for props like `label` and `variant`, then pair it with a Twig template that renders the markup. TwigComponent handles server-side rendering with zero JavaScript overhead, making it ideal for buttons, cards, alerts, and complex layout sections. You can define blocks for slots, computed properties for derived data, and use dependency injection for services.
How to pass props to Twig components?
TwigComponent accepts props as public class properties or constructor parameters. In your template, use HTML-like syntax: `<twig:Button label="Click me" variant="primary" />`. Props flow from the component tag into your PHP class, where you can validate, transform, or compute derived values. For optional props, set defaults in your class. TwigComponent automatically binds matching template variables to your class properties.
What are slots and blocks in TwigComponent?
TwigComponent uses Twig blocks as slots for composable content. Define a block in your component template (e.g., `{% block content %}default{% endblock %}`), then pass content when using the component: `<twig:Card><twig:block name="content">Your content here</twig:block></twig:Card>`. This pattern lets you nest components with flexible, template-driven layouts. Blocks act like Vue or React slots, enabling parent templates to inject markup into child components.
Can I build a component library or design system in Symfony?
Yes—TwigComponent is designed for building design systems and component libraries. Organize components in a dedicated directory, define reusable props and blocks across your library, and compose nested components using HTML syntax. You can create a cohesive set of buttons, forms, modals, and layout primitives. TwigComponent pairs well with Symfony UX for a complete design system workflow, letting teams maintain consistent, server-rendered UI across projects.
What are computed properties and lifecycle hooks in TwigComponent?
TwigComponent supports computed properties via `#[Computed]` attributes—methods that derive values from props without storing state. Lifecycle hooks like `PreMount` and `PostMount` let you run logic before or after component rendering. Use `#[PreMount]` to validate or transform props, and `#[PostMount]` for post-render setup. These features enable logic-heavy components while keeping templates clean and focused on presentation.
Can I use template-only components without a PHP class?
Yes—TwigComponent supports anonymous (template-only) components. Create a Twig template in your components directory without a backing PHP class; TwigComponent automatically exposes template variables as props. This is ideal for presentational markup like simple badges or decorative sections. For logic-heavy components, pair a PHP class with the template using the `#[AsTwigComponent]` attribute to unlock computed properties, lifecycle hooks, and dependency injection.
SKILL.md
rendered from the published skill — quoted content, verbatim
TwigComponent
Reusable UI components with PHP classes + Twig
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 4 files
skills/twig-component/SKILL.md
skills/twig-component/references/api.md
skills/twig-component/references/gotchas.md
skills/twig-component/references/patterns.md