Alert

<div class="grid w-full max-w-xl items-start gap-4">
    <twig:Alert>
        <twig:ux:icon name="tabler:circle-check" class="h-4 w-4" />
        <twig:Alert:Title>Success! Your changes have been saved</twig:Alert:Title>
        <twig:Alert:Description>
            This is an alert with icon, title and description.
        </twig:Alert:Description>
    </twig:Alert>
    <twig:Alert>
        <twig:ux:icon name="tabler:trash" class="h-4 w-4" />
        <twig:Alert:Title>
            This Alert has a title and an icon. No description.
        </twig:Alert:Title>
    </twig:Alert>
    <twig:Alert variant="destructive">
        <twig:ux:icon name="tabler:alert-circle" class="h-4 w-4" />
        <twig:Alert:Title>Unable to process your payment.</twig:Alert:Title>
        <twig:Alert:Description>
            <p>Please verify your billing information and try again.</p>
            <ul class="list-inside list-disc text-sm">
                <li>Check your card details</li>
                <li>Ensure sufficient funds</li>
                <li>Verify billing address</li>
            </ul>
        </twig:Alert:Description>
    </twig:Alert>
</div>

composer require twig/extra-bundle twig/html-extra:^3.12.0 tales-from-a-dev/twig-tailwind-extra:^1.0.0

{# @prop variant 'default'|'destructive' The variant, default to `default` #}
{# @block content The default block #}
{%- props variant = 'default' -%}
{%- set style = html_cva(
    base: 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
    variants: {
        variant: {
            default: 'bg-background text-foreground',
            destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
        },
    },
) -%}

<div
    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
    role="alert"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The default block #}
<p
    class="{{ 'text-sm [&_p]:leading-relaxed ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</p>

{# @block content The default block #}
<h5
    class="{{ 'mb-1 font-medium leading-none tracking-tight ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</h5>