diff --git a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig
index d67a5d6460f..408d4dcc45f 100644
--- a/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig
+++ b/src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog.html.twig
@@ -1,4 +1,5 @@
{# @prop open boolean Open (or not) the AlertDialog at initial rendering, default to `false` #}
+{# @prop id string Unique suffix identifier for generating AlertDialog internal IDs #}
{# @block content The default block #}
{%- props open = false, id -%}
diff --git a/src/Toolkit/kits/shadcn/dialog/EXAMPLES.md b/src/Toolkit/kits/shadcn/dialog/EXAMPLES.md
new file mode 100644
index 00000000000..e9a8a15ce83
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dialog/EXAMPLES.md
@@ -0,0 +1,85 @@
+# Examples
+
+## Default
+
+```twig {"preview":true,"height":"500px"}
+
+
+ Open
+
+
+
+ Are you absolutely sure?
+
+ This action cannot be undone. This will permanently delete your account
+ and remove your data from our servers.
+
+
+
+
+```
+
+## Custom close button
+
+```twig {"preview":true,"height":"500px"}
+
+
+ Share
+
+
+
+ Share link
+
+ Anyone who has this link will be able to view this.
+
+
+
+
+ Link
+
+
+
+
+
+
+ Close
+
+
+
+
+
+```
+
+## With form
+
+```twig {"preview":true,"height":"500px"}
+
+
+ Open Dialog
+
+
+
+ Edit profile
+
+ Make changes to your profile here. Click save when you're done.
+
+
+
+
+ Name
+
+
+
+ Username
+
+
+
+
+
+ Cancel
+
+ Save changes
+
+
+
+```
diff --git a/src/Toolkit/kits/shadcn/dialog/assets/controllers/dialog_controller.js b/src/Toolkit/kits/shadcn/dialog/assets/controllers/dialog_controller.js
new file mode 100644
index 00000000000..f35167f4151
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dialog/assets/controllers/dialog_controller.js
@@ -0,0 +1,33 @@
+import { Controller } from '@hotwired/stimulus';
+import { enter, leave } from 'el-transition';
+
+export default class extends Controller {
+
+ static targets = ['trigger', 'overlay', 'dialog', 'content'];
+
+ async open() {
+ this.dialogTarget.showModal();
+
+ await Promise.all([enter(this.overlayTarget), enter(this.contentTarget)]);
+
+ if (this.hasTriggerTarget) {
+ this.triggerTarget.setAttribute('aria-expanded', 'true');
+ }
+ }
+
+ async closeOnClickOutside({ target }) {
+ if (target === this.overlayTarget) {
+ await this.close()
+ }
+ }
+
+ async close() {
+ await Promise.all([leave(this.overlayTarget), leave(this.contentTarget)]);
+
+ this.dialogTarget.close();
+
+ if (this.hasTriggerTarget) {
+ this.triggerTarget.setAttribute('aria-expanded', 'false');
+ }
+ }
+}
diff --git a/src/Toolkit/kits/shadcn/dialog/manifest.json b/src/Toolkit/kits/shadcn/dialog/manifest.json
new file mode 100644
index 00000000000..01d70c2bd57
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dialog/manifest.json
@@ -0,0 +1,15 @@
+{
+ "$schema": "../../../schema-kit-recipe-v1.json",
+ "type": "component",
+ "name": "Dialog",
+ "description": "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.",
+ "copy-files": {
+ "assets/": "assets/",
+ "templates/": "templates/"
+ },
+ "dependencies": {
+ "composer": ["symfony/ux-icons", "twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra"],
+ "npm": ["el-transition"],
+ "importmap": ["el-transition"]
+ }
+}
diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog.html.twig
new file mode 100644
index 00000000000..fbb613db941
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog.html.twig
@@ -0,0 +1,16 @@
+{# @prop open boolean Open (or not) the Dialog at initial rendering, default to `false` #}
+{# @prop id string Unique suffix identifier for generating Dialog internal IDs #}
+{# @block content The default block #}
+{%- props open = false, id -%}
+
+{%- set _dialog_open = open %}
+{%- set _dialog_id = 'dialog-' ~ id -%}
+{%- set _dialog_title_id = _dialog_id ~ '-title' -%}
+{%- set _dialog_description_id = _dialog_id ~ '-description' -%}
+
+ {% block content %}{% endblock %}
+
diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Close.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Close.html.twig
new file mode 100644
index 00000000000..d1a4f560f3b
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Close.html.twig
@@ -0,0 +1,5 @@
+{# @block content The default block #}
+{%- set close_attrs = {
+ 'data-action': 'click->dialog#close',
+} -%}
+{%- block content %}{% endblock -%}
diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Content.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Content.html.twig
new file mode 100644
index 00000000000..06ee5e2296a
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Content.html.twig
@@ -0,0 +1,48 @@
+{# @prop showCloseButton boolean Whether the close button is shown, default to `true` #}
+{# @block content The default block #}
+{%- props showCloseButton = true -%}
+
+
diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Description.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Description.html.twig
new file mode 100644
index 00000000000..684498ed732
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Description.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+
+ {%- block content %}{% endblock -%}
+
diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Footer.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Footer.html.twig
new file mode 100644
index 00000000000..229c51772ad
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Footer.html.twig
@@ -0,0 +1,7 @@
+{# @block content The default block #}
+
diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Header.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Header.html.twig
new file mode 100644
index 00000000000..7bf9e31016c
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Header.html.twig
@@ -0,0 +1,7 @@
+{# @block content The default block #}
+
+ {%- block content %}{% endblock -%}
+
diff --git a/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Title.html.twig b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Title.html.twig
new file mode 100644
index 00000000000..8cd87623819
--- /dev/null
+++ b/src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Title.html.twig
@@ -0,0 +1,8 @@
+{# @block content The default block #}
+