symfony · Kocal · Nov 2, 2025 · Oct 16, 2025
@@ -1,3 +1,5 @@
+{# @prop open boolean Open (or not) the AlertDialog at initial rendering, default to `false` #}
+{# @block content The default block #}
 {%- props open = false, id -%}
 
 {%- set _alert_dialog_open = open %}

@@ -1,4 +1,6 @@
-{% props variant = 'default' %}
+{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The variant, default to `default` #}
+{# @block content The default block #}
+{%- props variant = 'default' -%}
 <twig:Button variant="{{ variant }}" {{ ...attributes }}>
     {{- block(outerBlocks.content) -}}
 </twig:Button>
@@ -1,7 +1,4 @@
-<twig:Button
-    variant="outline"
-    data-action="click->alert-dialog#close"
-    {{ ...attributes }}
->
+{# @block content The default block #}
+<twig:Button variant="outline" data-action="click->alert-dialog#close" {{ ...attributes }}>
     {{- block(outerBlocks.content) -}}
 </twig:Button>
@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <dialog
     id="{{ _alert_dialog_id }}"
     {{ _alert_dialog_open ? 'open' }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <p
     id="{{ _alert_dialog_description_id }}"
     class="{{ 'text-muted-foreground text-sm ' ~ attributes.render('class')|tailwind_merge }}"

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <footer
     class="{{ 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <header
     class="{{ 'flex flex-col gap-2 text-center sm:text-left ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <h2
     id="{{ _alert_dialog_title_id }}"
     class="{{ 'text-lg font-semibold ' ~ attributes.render('class')|tailwind_merge }}"

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 {%- set trigger_attrs = {
     'data-action': 'click->alert-dialog#open',
     'data-alert-dialog-target': 'trigger',

@@ -1,3 +1,5 @@
+{# @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',

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <p
     class="{{ 'text-sm [&_p]:leading-relaxed ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <h5
     class="{{ 'mb-1 font-medium leading-none tracking-tight ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,37 +1,40 @@
 # Examples
 
-## Default
+## With 1 / 1 aspect ratio
 
 ```twig {"preview":true,"height":"400px"}
-<twig:AspectRatio ratio="1 / 1" class="max-w-[300px]">
+<twig:AspectRatio ratio="1 / 1" class="max-h-90">
     <img
-        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80"
-        alt="Landscape photograph by Tobias Tullius"
+        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
+        alt="Bukchon Hanok Village by Y K"
         class="h-full w-full rounded-md object-cover"
     />
+    <a href="https://unsplash.com/fr/photos/rue-vide-entre-les-maisons--e6Xu27_T50" class="hover:underline">Bukchon Hanok Village by Y K</a>
 </twig:AspectRatio>
 ```
 
-## With a 1 / 1 aspect ratio
+## With 2 / 3 aspect ratio
 
 ```twig {"preview":true,"height":"400px"}
-<twig:AspectRatio ratio="1 / 1" class="max-w-[350px]">
+<twig:AspectRatio ratio="3 / 2" class="max-h-90">
     <img
-        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80"
-        alt="Landscape photograph by Tobias Tullius"
+        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
+        alt="Bukchon Hanok Village by Y K"
         class="h-full w-full rounded-md object-cover"
     />
+    <a href="https://unsplash.com/fr/photos/rue-vide-entre-les-maisons--e6Xu27_T50" class="hover:underline">Bukchon Hanok Village by Y K</a>
 </twig:AspectRatio>
 ```
 
-## With a 16 / 9 aspect ratio
+## With 16 / 9 aspect ratio
 
 ```twig {"preview":true,"height":"400px"}
-<twig:AspectRatio ratio="16 / 9" class="max-w-[350px]">
+<twig:AspectRatio ratio="16 / 9" class="max-h-90">
     <img
-        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80"
-        alt="Landscape photograph by Tobias Tullius"
+        src="https://images.unsplash.com/photo-1535189043414-47a3c49a0bed?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000"
+        alt="Bukchon Hanok Village by Y K"
         class="h-full w-full rounded-md object-cover"
     />
+    <a href="https://unsplash.com/fr/photos/rue-vide-entre-les-maisons--e6Xu27_T50" class="hover:underline">Bukchon Hanok Village by Y K</a>
 </twig:AspectRatio>
 ```
@@ -1,3 +1,6 @@
+{# @prop ratio string The ratio to use, example `3 / 4`, `16 / 9` #}
+{# @prop style string Additional CSS styles to apply #}
+{# @block content The default block #}
 {%- props ratio, style = '' -%}
 <div
     style="aspect-ratio: {{ ratio }}; {{ style }}"

@@ -1,4 +1,6 @@
-{%- props variant = 'default', outline = false -%}
+{# @prop variant 'default'|'secondary'|'destructive'|'outline' The variant, default to `default` #}
+{# @block content The default block #}
+{%- props variant = 'default' -%}
 {%- set style = html_cva(
     base: 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
     variants: {
@@ -11,7 +13,7 @@
     },
 ) -%}
 <div
-    class="{{ style.apply({variant: variant, outline: outline}, attributes.render('class'))|tailwind_merge }}"
+    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
     {{ attributes }}
 >
     {%- block content %}{% endblock -%}

@@ -10,7 +10,7 @@
         </twig:Breadcrumb:Item>
         <twig:Breadcrumb:Separator />
         <twig:Breadcrumb:Item>
-            <twig:Breadcrumb:Link href=".">Docs</twig:Breadcrumb:Link>
+            <twig:Breadcrumb:Ellipsis />
         </twig:Breadcrumb:Item>
         <twig:Breadcrumb:Separator />
         <twig:Breadcrumb:Item>

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <nav{{ attributes }} aria-label="Breadcrumb">
     {%- block content %}{% endblock -%}
 </nav>
@@ -1,13 +1,8 @@
 <span
-    class="{{ 'flex h-9 w-9 items-center justify-center ' ~ attributes.render('class')|tailwind_merge }}"
+    class="{{ '[&>svg]:w-3.5 [&>svg]:h-3.5 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}
     role="presentation"
     aria-hidden="true"
 >
-    {% set _block = block('content') %}
-    {% if content is defined and content is not empty %}
-        {%- block content %}{% endblock -%}
-    {% else %}
-        <span class="h-4 w-4">...</span>
-    {% endif %}
+    <twig:ux:icon name="lucide:ellipsis" />
 </span>
@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <li
     class="{{ 'inline-flex items-center gap-1.5 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <a
     class="{{ 'transition-colors hover:text-foreground ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <ol
     class="{{ 'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <span
     class="{{ 'font-normal text-foreground ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <li
     class="{{ '[&>svg]:w-3.5 [&>svg]:h-3.5 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -17,7 +17,7 @@
 ## Secondary
 
 ```twig {"preview":true}
-<twig:Button variant="outline">Outline</twig:Button>
+<twig:Button variant="secondary">Secondary</twig:Button>
 ```
 
 ## Destructive
@@ -67,3 +67,13 @@
     <twig:ux:icon name="lucide:loader-2" class="animate-spin" /> Please wait
 </twig:Button>
 ```
+
+## Different sizes
+
+```twig {"preview":true}
+<div class="flex items-center gap-2">
+    <twig:Button size="sm">Small</twig:Button>
+    <twig:Button>Default</twig:Button>
+    <twig:Button size="lg">Large</twig:Button>
+</div>
+```
@@ -1,4 +1,8 @@
-{%- props variant = 'default', outline = false, size = 'default', as = 'button' -%}
+{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The variant, default to `default` #}
+{# @prop size 'default'|'sm'|'lg'|'icon' The size, default to `default` #}
+{# @prop as 'button' The HTML tag to use, default to `button` #}
+{# @block content The default block #}
+{%- props variant = 'default', size = 'default', as = 'button' -%}
 {%- set style = html_cva(
     base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
     variants: {
@@ -20,7 +24,7 @@
 ) -%}
 
 <{{ as }}
-    class="{{ style.apply({variant: variant, outline: outline, size: size}, attributes.render('class'))|tailwind_merge }}"
+    class="{{ style.apply({variant: variant, size: size}, attributes.render('class'))|tailwind_merge }}"
     {{ attributes }}
 >
     {%- block content %}{% endblock -%}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <div
     class="{{ 'rounded-lg border bg-card text-card-foreground shadow-sm ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <div
     class="{{ 'p-6 pt-0 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <div
     class="{{ 'text-sm text-muted-foreground ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <div
     class="{{ 'flex items-center p-6 pt-0 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <div
     class="{{ 'flex flex-col space-y-1.5 p-6 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <div
     class="{{ 'text-2xl font-semibold leading-none tracking-tight ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,6 +1,4 @@
-{%- props type = 'text' -%}
 <input
-    type="{{ type }}"
     class="{{ 'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}
 >
@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <label
     class="{{ ('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ' ~ attributes.render('class'))|tailwind_merge }}"
     {{ attributes }}

@@ -12,7 +12,7 @@
             <twig:Pagination:Link href="#">1</twig:Pagination:Link>
         </twig:Pagination:Item>
         <twig:Pagination:Item>
-            <twig:Pagination:Link href="#" isActive>2</twig:Pagination:Link>
+            <twig:Pagination:Link href="#" active>2</twig:Pagination:Link>
         </twig:Pagination:Item>
         <twig:Pagination:Item>
             <twig:Pagination:Link href="#">3</twig:Pagination:Link>
@@ -45,7 +45,7 @@
             <twig:Pagination:Link href="#">4</twig:Pagination:Link>
         </twig:Pagination:Item>
         <twig:Pagination:Item>
-            <twig:Pagination:Link href="#" isActive>5</twig:Pagination:Link>
+            <twig:Pagination:Link href="#" active>5</twig:Pagination:Link>
         </twig:Pagination:Item>
         <twig:Pagination:Item>
             <twig:Pagination:Link href="#">6</twig:Pagination:Link>

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <nav
     class="{{ 'mx-auto flex w-full justify-center ' ~ attributes.render('class')|tailwind_merge }}"
     role="navigation"

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <ul {{ attributes.without('class') }}
     class="{{ 'flex flex-row items-center gap-1 ' ~ attributes.render('class')|tailwind_merge }}"
 >

@@ -1,6 +1,6 @@
 <span
     aria-hidden="true"
-    class="{{ 'flex h-9 w-9 items-center justify-center ' ~ attributes.render('class')|tailwind_merge }}"
+    class="{{ 'flex size-9 items-center justify-center ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes.without('class') }}
 >
     <twig:ux:icon name="lucide:more-horizontal" class="size-4" />

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <li{{ attributes }}>
     {%- block content %}{% endblock -%}
 </li>
@@ -1,9 +1,11 @@
-{%- props isActive = false, size = 'icon' -%}
+{# @prop active boolean Whether the link is active or not, default to `false` #}
+{# @block content The default block #}
+{%- props active = false -%}
 <twig:Button
     as="a"
-    variant="{{ isActive ? 'outline' : 'ghost' }}"
-    size="{{ size }}"
-    aria-current="{{ isActive ? 'page' : false }}"
+    variant="{{ active ? 'outline' : 'ghost' }}"
+    size="icon"
+    aria-current="{{ active ? 'page' : false }}"
     {{ ...attributes.without('class') }}
 >
     {{- block(outerBlocks.content) -}}

@@ -1,5 +1,5 @@
+{# @prop value integer The progress value between 0 and 100, default to `0` #}
 {%- props value = 0 -%}
-
 <div
     class="{{ 'relative h-4 w-full overflow-hidden rounded-full bg-secondary ' ~ attributes.render('class')|tailwind_merge }}"
     role="progressbar"

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <select
     class="{{ 'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,5 @@
+{# @prop orientation 'horizontal'|'vertical' The orientation of the separator, default to `horizontal` #}
+{# @prop decorative boolean Whether the separator is decorative or not, default to `true` #}
 {%- props orientation = 'horizontal', decorative = true -%}
 {%- set style = html_cva(
     base: 'shrink-0 bg-border',
@@ -14,5 +16,4 @@
         role: decorative ? 'none' : 'separator',
         'aria-orientation': decorative ? false : orientation,
     }) }}
->
-</div>
+></div>
@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <div class="relative w-full overflow-auto">
     <table
         class="{{ 'w-full caption-bottom text-sm ' ~ attributes.render('class')|tailwind_merge }}"

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <tbody
     class="{{ '[&_tr:last-child]:border-0 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <caption
     class="{{ 'mt-4 text-sm text-muted-foreground ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <td
     class="{{ 'p-4 align-middle [&:has([role=checkbox])]:pr-0 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <tfoot
     class="{{ 'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}

@@ -1,3 +1,4 @@
+{# @block content The default block #}
 <th
     class="{{ 'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 ' ~ attributes.render('class')|tailwind_merge }}"
     {{ attributes }}