Alert

A notification component that displays important messages with an icon, title, and description.

Loading... 
<twig:Alert class="max-w-lg">
    <twig:ux:icon name="tabler:terminal" class="h-4 w-4" />
    <twig:Alert:Title>Heads up!</twig:Alert:Title>
    <twig:Alert:Description>
        You can add components to your app using the cli.
    </twig:Alert:Description>
</twig:Alert>

Installation

Ensure the Symfony UX Toolkit is installed in your Symfony app:

composer require --dev symfony/ux-toolkit

Then, install the recipe and its dependencies by running:

bin/console ux:install Alert --kit shadcn

That's it!

Install the following Composer dependencies:

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

Copy the following file(s) into your Symfony app:

templates/components/Alert.html.twig 
{# @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>
templates/components/Alert/Description.html.twig 
{# @block content The default block #}
<p
    class="{{ 'text-sm [&_p]:leading-relaxed ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</p>
templates/components/Alert/Title.html.twig 
{# @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>

Happy coding!

Usage

<twig:Alert class="max-w-lg">
    <twig:ux:icon name="tabler:terminal" class="h-4 w-4" />
    <twig:Alert:Title>Heads up!</twig:Alert:Title>
    <twig:Alert:Description>
        You can add components to your app using the cli.
    </twig:Alert:Description>
</twig:Alert>

Examples

Default

Loading... 
<twig:Alert class="max-w-lg">
    <twig:ux:icon name="tabler:terminal" class="h-4 w-4" />
    <twig:Alert:Title>Heads up!</twig:Alert:Title>
    <twig:Alert:Description>
        You can add components to your app using the cli.
    </twig:Alert:Description>
</twig:Alert>

Destructive

Loading... 
<twig:Alert variant="destructive" class="max-w-lg">
    <twig:ux:icon name="tabler:alert-circle" class="h-4 w-4" />
    <twig:Alert:Title>Error</twig:Alert:Title>
    <twig:Alert:Description>
        Your session has expired. Please log in again.
    </twig:Alert:Description>
</twig:Alert>

API Reference

Alert

Prop Type Description
variant 'default'|'destructive' The variant, default to default
Block Description
content The default block

Alert:Description

Block Description
content The default block

Alert:Title

Block Description
content The default block