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
Decision gist · record as of 2026-06-14
TwigComponent lets you build server-rendered reusable UI components using PHP classes paired with Twig templates. 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.
Use it when
- TwigComponent accepts props as public class properties or constructor parameters.
- TwigComponent uses Twig blocks as slots for composable content.
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
smnandre/symfony-ux-skills/twig-component
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create reusable UI components with PHP classes and Twig templates”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Symfony UX is a decision guide for selecting the right tool from Symfony's reactive frontend stack. It helps you navigate between Stimulus for DOM behavior, Turbo for page updates, TwigComponent for static UI, LiveComponent for server-driven interactivity, UX Icons for SVG rendering, and UX Map for interactive maps. Use it when you're unsure which package solves your problem or want to combine multiple tools.
LiveComponent lets you create interactive UI components in PHP and Twig that automatically re-render when users interact with them, all without writing JavaScript. Each user action triggers a server round-trip that updates the component and morphs the DOM, making it ideal for live search, real-time validation, dynamic filtering, and dependent form fields. Use it when your component's output depends on user input and requires server-side logic.
UX Map brings interactive mapping to Symfony applications using either Leaflet or Google Maps as your renderer. Define maps in PHP, render them in Twig, and layer on Stimulus controllers for event handling. Supports markers, polygons, polylines, circles, and popup info windows.
Stimulus is a lightweight JavaScript framework that wires controllers to HTML via data attributes, letting you handle clicks, inputs, and DOM changes without rendering markup. Attach behavior to server-rendered elements using `data-controller`, `data-action`, and `data-target` attributes, then compose controllers for toggles, modals, dropdowns, and more. Clean up in `disconnect()` when Turbo navigates between pages.
Turbo delivers responsive, single-page application feel using only server-side HTML rendering. Drive handles automatic AJAX navigation across all links and forms, Frames scope updates to individual page sections, and Streams push multi-target DOM changes from the server—enabling lazy loading, inline editing, pagination, and real-time updates without client-side logic.
Component Library generates fully-typed React components using shadcn/ui patterns, CVA variants, and Radix UI primitives—eliminating hours of hand-coding. Choose from form inputs, data tables, navigation, feedback overlays, and layout components, all with built-in accessibility, dark mode, and responsive design.