Object-Oriented Templates

PHP Classes that render: Twig Components

Create reusable, object-oriented templates. PHP class + template = Twig components. 

composer require symfony/ux-twig-component
Read the docs
src/Twig/Components/Alert.php 
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;

#[AsTwigComponent]
final class Alert
{
    public ?string $variant = null;

    public function getIcon(): string
    {
        return match ($this->variant) {
            'danger' => 'bi:exclamation-circle',
            'warning' => 'bi:exclamation-triangle',
            'info' => 'bi:info-circle',
            default => 'bi:check-circle',
        };
    }
}
templates/components/Alert.html.twig 
{#- Alert / message box. Variants via html_cva; content passed as the default slot. -#}
{%- set style = html_cva(
    base: 'flex items-center gap-2 rounded-md border p-4',
    variants: {
        variant: {
            success: 'border-green-200 bg-green-100 text-green-800 dark:border-green-900 dark:bg-green-950 dark:text-green-300',
            danger: 'border-red-200 bg-red-100 text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-300',
            warning: 'border-yellow-200 bg-yellow-100 text-yellow-800 dark:border-yellow-900 dark:bg-yellow-950 dark:text-yellow-300',
            info: 'border-blue-200 bg-blue-100 text-blue-800 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-300',
        },
    },
) -%}
<div class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}" role="alert" {{ attributes.without('class') }}>
    <twig:ux:icon name="{{ this.icon }}" class="Icon shrink-0" />
    <span>{% block content %}{% endblock %}</span>
</div>
Symfony logo

UX Twig Components

<twig:Alert variant="info">
    This is an informational message.
</twig:Alert>
<twig:Alert variant="success">
    Your changes were saved.
</twig:Alert>
<twig:Alert variant="warning">
    Your session will expire in a few minutes.
</twig:Alert>
<twig:Alert variant="danger">
    Oh no! The dinos escaped!
</twig:Alert>

Install It

$ composer require symfony/ux-twig-component