Alert

The UX Toolkit is not mandatory to install a component. You can install it manually by following the next steps:

1. 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>
   

2. If necessary, 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

3. And the most important, enjoy!