diff --git a/code_samples/back_office/components/twig_components.yaml b/code_samples/back_office/components/twig_components.yaml
new file mode 100644
index 0000000000..bfcfc70e1e
--- /dev/null
+++ b/code_samples/back_office/components/twig_components.yaml
@@ -0,0 +1,41 @@
+ibexa_twig_components:
+    admin-ui-user-menu:
+        custom-html-component:
+            type: html
+            arguments:
+                content: '<b>Hello world!</b>'
+        custom-template-component:
+            type: template
+            arguments:
+                template: '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig'
+                parameters:
+                    user_content:
+                        name: "Thumbnail"
+                        thumbnail:
+                            resource: https://placecats.com/100/100
+        custom-controller-component:
+            type: controller
+            arguments:
+                controller: '\App\Controller\MyController::requestAction'
+                parameters:
+                    parameter1: 'custom'
+                    parameter2: true
+    admin-ui-stylesheet-head:
+        custom-link-component:
+            type: stylesheet
+            arguments:
+                href: 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&amp;display=fallback'
+                rel: stylesheet
+                crossorigin: anonymous
+                integrity: sha384-LN/mLhO/GN6Ge8ZPvI7uRsZpiXmtSkep+aFlJcHa8by4TvA34o1am9sa88eUzKTD
+                type: text/css
+    admin-ui-script-head:
+        custom-script-component:
+            type: script
+            arguments:
+                src: 'https://doc.ibexa.co/en/latest/js/custom.js'
+                crossorigin: anonymous
+                defer: false
+                async: true
+                integrity: sha384-Ewi2bBDtPbbu4/+fs8sIbBJ3zVl0LDOSznfhFR/JBK+SzggdRdX8XQKauWmI9HH2
+                type: text/javascript
diff --git a/code_samples/back_office/content_type/config/custom_services.yaml b/code_samples/back_office/content_type/config/custom_services.yaml
index ddf035c414..950a905d20 100644
--- a/code_samples/back_office/content_type/config/custom_services.yaml
+++ b/code_samples/back_office/content_type/config/custom_services.yaml
@@ -4,4 +4,4 @@ services:
         arguments:
             $template: '@@ibexadesign/content_type/edit/custom_tab.html.twig'
         tags:
-            - { name: ibexa.admin_ui.component, group: 'content-edit-sections' }
+            - { name: ibexa.twig.component, group: 'admin-ui-content-edit-sections' }
diff --git a/code_samples/back_office/dashboard/article_tab/config/custom_services.yaml b/code_samples/back_office/dashboard/article_tab/config/custom_services.yaml
index 96a6884ab9..fb629359bc 100644
--- a/code_samples/back_office/dashboard/article_tab/config/custom_services.yaml
+++ b/code_samples/back_office/dashboard/article_tab/config/custom_services.yaml
@@ -10,4 +10,4 @@ services:
         arguments:
             $groupIdentifier: 'custom_group'
         tags:
-            - { name: ibexa.admin_ui.component, group: 'dashboard-blocks' }
+            - { name: ibexa.twig.component, group: 'admin-ui-dashboard-blocks' }
diff --git a/code_samples/back_office/search/config/append_to_services.yaml b/code_samples/back_office/search/config/append_to_services.yaml
index d696ba4c7a..c7013c63a8 100644
--- a/code_samples/back_office/search/config/append_to_services.yaml
+++ b/code_samples/back_office/search/config/append_to_services.yaml
@@ -25,7 +25,7 @@ services:
             $template: '@@ibexadesign/ui/global_search_autocomplete_product_template.html.twig'
             $groupIdentifier: 'global-search-autocomplete-product'
         tags:
-            - { name: ibexa.admin_ui.component, group: global-search-autocomplete-templates }
+            - { name: ibexa.twig.component, group: global-search-autocomplete-templates }
 
     App\Search\SortingDefinition\Provider\SectionNameSortingDefinitionProvider:
         tags:
diff --git a/code_samples/user_management/oauth_google/config/custom_services.yaml b/code_samples/user_management/oauth_google/config/custom_services.yaml
index e4bceef1cf..5897e991bf 100644
--- a/code_samples/user_management/oauth_google/config/custom_services.yaml
+++ b/code_samples/user_management/oauth_google/config/custom_services.yaml
@@ -10,4 +10,4 @@ services:
         arguments:
             $template: '@@ibexadesign/account/login/oauth2_login.html.twig'
         tags:
-            - { name: ibexa.admin_ui.component, group: login-form-after }
+            - { name: ibexa.twig.component, group: admin-ui-login-form-after }
diff --git a/docs/administration/back_office/back_office_elements/custom_components.md b/docs/administration/back_office/back_office_elements/custom_components.md
index f191f0a6a9..6e975e0add 100644
--- a/docs/administration/back_office/back_office_elements/custom_components.md
+++ b/docs/administration/back_office/back_office_elements/custom_components.md
@@ -2,85 +2,118 @@
 description: Back office components allow you to inject any custom widgets into selected places of the user interface.
 ---
 
-# Custom components
-
-The back office has designated places where you can use your own components.
-
-Components enable you to inject widgets (for example, **My dashboard** blocks) and HTML code (for example, a tag for loading JS or CSS files).
-A component is any class that implements the `Renderable` interface.
-It must be tagged as a service in `config/services.yaml`:
-
-``` yaml
-App\Component\MyNewComponent:
-    tags:
-        - { name: ibexa.admin_ui.component, group: content-edit-form-before }
-```
-
-`group` indicates where the widget is displayed. The available groups are:
-
-- [`stylesheet-head`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L101)
-- [`script-head`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L102)
-- [`stylesheet-body`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L210)
-- [`script-body`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L211)
-- [`content-edit-form-before`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/edit.html.twig#L37)
-- [`content-edit-form-after`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/edit.html.twig#L47)
-- [`content-create-form-before`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/create.html.twig#L37)
-- [`content-create-form-after`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/create.html.twig#L45)
-- [`dashboard-blocks`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/dashboard/dashboard.html.twig#L30)
-- [`dashboard-all-tab-groups`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/dashboard/block/all.html.twig#L6)
-- [`dashboard-my-tab-groups`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/dashboard/block/me.html.twig#L6)
-- [`content-type-tab-groups`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/content_type/index.html.twig#L37)
-- `calendar-widget-before`
-- [`login-form-before`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/account/login/index.html.twig#L7)
-- [`login-form-after`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/account/login/index.html.twig#L70)
-- [`global-search`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L129)
-
-## Base component classes
-
-If you only need to inject a short element (for example, a Twig template or a CSS link) without writing a class, you can make use of the following base classes:
-
-- `TwigComponent` renders a Twig template.
-- `LinkComponent` renders the HTML `<link>` tag.
-- `ScriptComponent` renders the HTML `<script>` tag.
-
-In this case, all you have to do is add a service definition (with proper parameters), for example:
-
-``` yaml
-appbundle.components.my_twig_component:
-    parent: Ibexa\AdminUi\Component\TwigComponent
-    autowire: true
-    autoconfigure: false
-    arguments:
-        $template: path/to/file.html.twig
-        $parameters:
-            first_param: first_value
-            second_param: second_value
-    tags:
-        - { name: ibexa.admin_ui.component, group: dashboard-blocks }
-```
-
-This renders the `path/to/file.html.twig` template with `first_param` and `second_param` as parameters.
-
-With `LinkComponent` and `ScriptComponent` you provide `$href` and `$src` as arguments:
-
-``` yaml
-app.components.my_link_component:
-    parent: Ibexa\AdminUi\Component\LinkComponent
-    autowire: true
-    autoconfigure: false
-    arguments:
-        $href: 'http://address.of/file.css'
-    tags:
-        - { name: ibexa.admin_ui.component, group: stylesheet-head }
-```
-
-``` yaml
-app.components.my_script_component:
-    parent: Ibexa\AdminUi\Component\ScriptComponent
-    autowire: true
-    autoconfigure: false
-    arguments:
-        $src: 'http://address.of/file.js'
-    tags:
-        - { name: ibexa.admin_ui.component, group: script-body }
-```
+# Customizing the back office with Twig Components
+
+You can customize many of the back office views by using [Twig components](components.md).
+This allows you to inject your own custom logic and extend the templates.
+
+The available groups for the back office are:
+
+## Admin UI
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-login-form-after` | `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/account/login/index.html.twig` |
+|`admin-ui-login-form-before` | `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/account/login/index.html.twig` |
+|`admin-ui-content-create-form-before`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/create/create.html.twig`</li><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/user/create.html.twig` </li></ul>|
+|`admin-ui-content-create-form-after`|  <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/create/create.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig`</li><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/user/create.html.twig`</li></ul> |
+|`admin-ui-content-edit-form-after`| <ul><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig` </li><li>  `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig`</li><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/user/edit.html.twig`</li></ul> |
+|`admin-ui-content-edit-form-before`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig`</li><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/user/edit.html.twig`</li></ul>  |
+|`admin-ui-content-edit-sections`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig`</li></ul> |
+|`admin-ui-content-form-create-header-actions`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/create/create.html.twig` |
+|`admin-ui-content-form-edit-header-actions`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig` |
+|`admin-ui-content-tree-after`| `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/content/location_view.html.twig` |
+|`admin-ui-content-tree-before`| `vendor/ibexaadmin-ui/src/bundle/Resources/views/themes/admin/content/location_view.html.twig` |
+|`admin-ui-content-type-edit-sections`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content_type/edit.html.twig` |
+|`admin-ui-content-type-tab-groups`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content_type/index.html.twig` |
+|`admin-ui-dashboard-all-tab-groups`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/dashboard/block/all.html.twig` |
+|`admin-ui-dashboard-blocks`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/dashboard/dashboard.html.twig` |
+|`admin-ui-dashboard-my-tab-groups`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/dashboard/block/me.html.twig` |
+|`admin-ui-distraction-free-mode-extras`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig` |
+|`admin-ui-form-content-add-translation-body`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig` |
+|`admin-ui-global-search-autocomplete-templates`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/global_search.html.twig` |
+|`admin-ui-global-search`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
+|`admin-ui-header-user-menu-middle`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig` |
+|`admin-ui-image-edit-actions-after`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ezimage.html.twig` </li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ezimageasset.html.twig` </li></ul>|
+|`admin-ui-layout-content-after`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
+|`admin-ui-link-manager-block`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/url_management/url_management.html.twig` |
+|`admin-ui-location-view-content-alerts`| `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/content/location_view.html.twig` |
+|`admin-ui-location-view-tab-groups`| `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/content/location_view.html.twig` |
+|`admin-ui-location-view-tabs-after`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/tab/location_view.html.twig` |
+|`admin-ui-script-body`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
+|`admin-ui-script-head`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
+|`admin-ui-stylesheet-body`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout_error.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig`</li> |
+|`admin-ui-stylesheet-head`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
+|`admin-ui-systeminfo-tab-groups`| `vendor/ibexa/system-info/src/bundle/Resources/views/themes/admin/system_info/info.html.twig` |
+|`admin-ui-user-menu`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
+|`admin-ui-user-profile-blocks`| `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/account/profile/view.html.twig` |
+
+For more information, see [this example using few of those components](components.md#example).
+
+## Calendar
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-calendar-widget-before`| `vendor/ibexa/calendar/src/bundle/Resources/views/themes/admin/calendar/view.html.twig` |
+
+## Site Context
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-content-tree-before`| `vendor/ibexa/site-context/src/bundle/Resources/views/themes/admin/content/fullscreen.html.twig` |
+|`admin-ui-content-tree-after`| `vendor/ibexa/site-context/src/bundle/Resources/views/themes/admin/content/fullscreen.html.twig` |
+
+## Product Catalog
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-attribute-definition-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/attribute_definition/view.html.twig` |
+|`admin-ui-attribute-definition-options-block`| `pvendor/ibexa/roduct-catalog/src/bundle/Resources/views/themes/admin/product_catalog/attribute_definition/tab/details.html.twig` |
+|`admin-ui-attribute-group-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/attribute_group/view.html.twig` |
+|`admin-ui-catalog-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/catalog/view.html.twig` |
+|`admin-ui-customer-group-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/customer_group/view.html.twig` |
+|`admin-ui-product-create-form-header-actions`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/create.html.twig` |
+|`admin-ui-product-create-form-after`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/create.html.twig` |
+|`admin-ui-product-edit-form-header-actions`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/edit.html.twig` |
+|`admin-ui-product-edit-form-after`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/edit.html.twig` |
+|`admin-ui-product-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/view.html.twig` |
+|`admin-ui-product-type-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product_type/view.html.twig` |
+
+## Taxonomy
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-location-view-tab-groups`| `vendor/ibexa/taxonomy/src/bundle/Resources/views/themes/admin/ibexa/taxonomy/taxonomy_entry/show.html.twig` |
+
+## Page Builder [[% include 'snippets/experience_badge.md' %]]
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-infobar-options-before`| `vendor/ibexa/page-builder/src/bundle/Resources/views/page_builder/infobar/base.html.twig` |
+
+## Order Management [[% include 'snippets/commerce_badge.md' %]]
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-order-details-summary-stats`| `vendor/ibexa/order-management/src/bundle/Resources/views/themes/admin/order_management/order/details_summary.html.twig` |
+|`admin-ui-order-details-summary-grid`| `vendor/ibexa/order-management/src/bundle/Resources/views/themes/admin/order_management/order/details_summary.html.twig` |
+
+## Payments [[% include 'snippets/commerce_badge.md' %]]
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-payment-method-tabs`| `vendor/ibexa/payment/src/bundle/Resources/views/themes/admin/payment_method/view.html.twig` |
+
+## Shipping [[% include 'snippets/commerce_badge.md' %]]
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-shipment-summary-grid`| `vendor/ibexa/shipping/src/bundle/Resources/views/themes/admin/shipment/tab/summary.html.twig` |
+|`admin-ui-shipping-method-block`| `vendor/ibexa/shipping/src/bundle/Resources/views/themes/admin/shipping/shipping_method/view.html.twig` |
+
+## AI Actions [[% include 'snippets/lts-update_badge.md' %]]
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-action-configuration-tabs`| `vendor/ibexa/connector-ai/src/bundle/Resources/views/themes/admin/connector_ai/action_configuration/view.html.twig` |
+
diff --git a/docs/administration/back_office/back_office_tabs/back_office_tabs.md b/docs/administration/back_office/back_office_tabs/back_office_tabs.md
index 5693f04af7..997fc98526 100644
--- a/docs/administration/back_office/back_office_tabs/back_office_tabs.md
+++ b/docs/administration/back_office/back_office_tabs/back_office_tabs.md
@@ -71,7 +71,8 @@ To create a tab group, register it as a service:
 [[= include_file('code_samples/back_office/dashboard/article_tab/config/custom_services.yaml', 0, 1) =]][[= include_file('code_samples/back_office/dashboard/article_tab/config/custom_services.yaml', 7, 13) =]]
 ```
 
-Tag the group with `ibexa.admin_ui.component`.
+Tag the group with `ibexa.twig.component`.
 `group` indicates where the group is rendered.
 
-For a list of possible rendering places, see [Injecting custom components](custom_components.md).
+To learn more about this mechanism, see [Twig Components](components.md).
+And for the groups available in the back office, see [custom components in the back office](custom_components.md).
diff --git a/docs/administration/back_office/customize_search_suggestion.md b/docs/administration/back_office/customize_search_suggestion.md
index e2f019426b..cfc9490b5e 100644
--- a/docs/administration/back_office/customize_search_suggestion.md
+++ b/docs/administration/back_office/customize_search_suggestion.md
@@ -135,7 +135,7 @@ The example template for this wrapping node is stored in `templates/themes/admin
 - At Twig level, it includes the item template, replaces Twig variables with the strings used by the JS renderer,
   and passes it to the [`escape` filter](https://twig.symfony.com/doc/3.x/filters/escape.html) with the HTML attribute strategy.
 
-To be present, this wrapping node template must be added to the `global-search-autocomplete-templates` group of tabs components:
+To be present, this wrapping node template must be added to the `admin-ui-global-search-autocomplete-templates` group of tabs components:
 
 ``` yaml
 services:
diff --git a/docs/administration/dashboard/configure_default_dashboard.md b/docs/administration/dashboard/configure_default_dashboard.md
index b373f2ec06..91535c96fb 100644
--- a/docs/administration/dashboard/configure_default_dashboard.md
+++ b/docs/administration/dashboard/configure_default_dashboard.md
@@ -1,6 +1,7 @@
 ---
 title: Default dashboard configuration
 description: Configure default dashboard.
+edition: experience
 ---
 
 # Configure default dashboard
@@ -83,4 +84,4 @@ ibexa:
                 container_content_type_identifier: user_dashboard_container
 ```
 
-The custom content type should be a container and needs to have a field type with `name` identifier.
\ No newline at end of file
+The custom content type should be a container and needs to have a field type with `name` identifier.
diff --git a/docs/administration/dashboard/customize_dashboard.md b/docs/administration/dashboard/customize_dashboard.md
index fcd7e7153b..d349d6b328 100644
--- a/docs/administration/dashboard/customize_dashboard.md
+++ b/docs/administration/dashboard/customize_dashboard.md
@@ -1,11 +1,17 @@
 ---
 title: Dashboard customization
 description: Customize dashboard.
+edition: experience
 ---
 
 # Customize dashboard
 
-You can customize the dashboard depending on your needs using Dahboard Builder.
+!!! info
+
+     The Dashboard Builder is available only in the Experience and Commerce editions.
+     The dashboard from the Headless edition can be customized using [Twig Components](components.md).
+
+You can customize the dashboard depending on your needs using Dashboard Builder.
 Customized dashboard displays a set of widgets selected by the user.
 
 !!! tip
diff --git a/docs/administration/dashboard/php_api_dashboard_service.md b/docs/administration/dashboard/php_api_dashboard_service.md
index 02b06ee025..7b3fe5ab0b 100644
--- a/docs/administration/dashboard/php_api_dashboard_service.md
+++ b/docs/administration/dashboard/php_api_dashboard_service.md
@@ -1,6 +1,7 @@
 ---
 title: Dashboard service's PHP API
 description: Use DashboardService to manage dashboards.
+edition: experience
 ---
 
 # DashboardService's PHP API
@@ -32,4 +33,4 @@ The following line runs the command with `74` as the model dashboard's Content I
 
 ```bash
 php bin/console doc:dashboard 74 13 --siteaccess=admin
-```
\ No newline at end of file
+```
diff --git a/docs/api/event_reference/twig_component_events.md b/docs/api/event_reference/twig_component_events.md
new file mode 100644
index 0000000000..0d0edbe143
--- /dev/null
+++ b/docs/api/event_reference/twig_component_events.md
@@ -0,0 +1,16 @@
+---
+description: Events that are triggered when rendering Twig Components.
+page_type: reference
+month_change: false
+---
+
+# Twig Components events
+
+Use the events to hook into the rendering process of [Twig Components](components.md).
+
+## Twig Component rendering
+
+| Event | Dispatched by | Description |
+|---|---|---|
+|`RenderGroupEvent`| `\Ibexa\TwigComponents\Component\Renderer\DefaultRenderer::renderGroup()` | Dispatched before a Component group is rendered
+|`RenderSingleEvent`| `\Ibexa\TwigComponents\Component\Renderer\DefaultRenderer::renderSingle()` |Dispatched before a single Component is rendered
diff --git a/docs/templating/components.md b/docs/templating/components.md
new file mode 100644
index 0000000000..9b2e9696eb
--- /dev/null
+++ b/docs/templating/components.md
@@ -0,0 +1,87 @@
+---
+description: Twig components allow you to inject any custom widgets into selected places of the user interface.
+---
+
+# Twig Components
+
+Twig Components are widgets (for example, **My dashboard** blocks from Headless edition) and HTML code (for example, a tag for loading JS or CSS files) that you can inject into the existing templates to customize and extend the user interface.
+They are combined into groups that are rendered in designated templates.
+
+Built-in Twig Component groups are available for the [back office](custom_components.md), but you can create your own for use anywhere.
+
+To learn which groups are available in a given view, use the [integration with Symfony Profiler](#symfony-profiler-integration).
+
+## Create Twig Component
+
+You can create Twig Components in one of two ways:
+
+### PHP code
+
+Create a class implementing the `\Ibexa\Contracts\TwigComponents\ComponentInterface` interface and register it as a service by using the `ibexa.twig.component` service tag, for example:
+
+``` yaml
+App\Component\MyNewComponent:
+    tags:
+        - { name: ibexa.twig.component, group: content-edit-form-before, priority: 0 }
+```
+
+The available attributes are:
+
+- `group` - indicates the group to which the component belongs
+- `priority` - indicates the priority of rendering this component when rendering the whole component group. The higher the value the earlier the component is rendered
+
+This way requires writing custom code, but it allows you to fully control the rendering of the component.
+
+### YAML configuration
+
+You can create a Twig Component and add it to a group using YAML configuration, as in the example below:
+
+``` yaml
+ibexa_twig_components:
+    # Component group
+    storefront-before-head:
+        # Component name
+        google_tag_manager:
+            type: script
+            arguments:
+                src: 'https://...'
+```
+
+The Component priority cannot be specified when using the YAML configuration, but it allows you to use the built-in components to quickly achieve common goals.
+
+You can use an unique group name when creating a Twig Component to create your own group.
+
+## Built-in components
+
+| Name | Description | YAML type |
+|---|---|---|
+| [Script](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/ScriptComponent.php) | Renders a [`<script>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) | `script` |
+| [Stylesheet](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/LinkComponent.php) | Renders a [`<link>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link) | `stylesheet`
+| [Template](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/TemplateComponent.php) | Renders a Twig template|`template` |
+| [Controller](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/ControllerComponent.php) | Renders a Symfony controller |`controller` |
+| [HTML](https://github.com/ibexa/twig-components/blob/main/src/lib/Component/HtmlComponent.php) | Renders static HTML |`html` |
+
+## Example
+
+The following example shows how you can use each of the built-in components to customize the back office:
+
+``` yaml
+[[= include_file('code_samples/back_office/components/twig_components.yaml') =]]
+```
+
+## Render Twig Components
+
+Render both single Twig Components and whole groups using the [dedicated Twig functions](component_twig_functions.md).
+You can modify the Component rendering process by:
+
+- listening to one of the [related events](twig_component_events.md)
+- decorating the `\Ibexa\Contracts\TwigComponents\Renderer\RendererInterface` service
+
+## Symfony Profiler integration
+
+Use the built-in integration with [Symfony Profiler]([[= symfony_doc =]]/profiler.html) to see which Twig Components have been rendered in a given view. In the **[[= product_name =]]** tab you can find:
+
+- the list of all rendered Twig Component groups by the given view, including empty groups
+- the list of rendered Twig Components with information about the group they belong to
+
+![Symfony Profiler showing the list of rendered Twig Components in a back office view](img/twig_components_symfony_profiler.png "Symfony Profiler showing the list of rendered Twig Components in a back office view")
diff --git a/docs/templating/img/twig_components_symfony_profiler.png b/docs/templating/img/twig_components_symfony_profiler.png
new file mode 100644
index 0000000000..564abe1751
Binary files /dev/null and b/docs/templating/img/twig_components_symfony_profiler.png differ
diff --git a/docs/templating/twig_function_reference/component_twig_functions.md b/docs/templating/twig_function_reference/component_twig_functions.md
new file mode 100644
index 0000000000..5be79e1066
--- /dev/null
+++ b/docs/templating/twig_function_reference/component_twig_functions.md
@@ -0,0 +1,32 @@
+---
+description: Twig Components allow you to inject custom widgets into selected templates
+page_type: reference
+---
+
+# Twig Component functions
+
+## `ibexa_twig_component_group`
+
+The `ibexa_twig_component_group` function renders the specified [Twig Component](components.md) group.
+You can pass optional parameters as the second argument. They are passed to the `\Ibexa\Contracts\TwigComponents\Renderer\RendererInterface` service and then to the rendered component.
+
+### Examples
+
+``` html+twig
+{{ ibexa_twig_component_group('storefront-before-maincart', {
+    'cart' : cart|default(null)
+}) }}
+```
+
+## `ibexa_twig_component`
+
+The `ibexa_twig_component` function renders a single Twig Component from the specified group.
+You can pass optional parameters as the third argument. They are passed to the `\Ibexa\Contracts\TwigComponents\Renderer\RendererInterface` service and then to the rendered component.
+
+### Examples
+
+``` html+twig
+{{ ibexa_twig_component('storefront-before-maincart', 'my-component', {
+    'cart' : cart|default(null)
+}) }}
+```
diff --git a/docs/templating/twig_function_reference/product_twig_functions.md b/docs/templating/twig_function_reference/product_twig_functions.md
index d40a359a17..7b4aac3d8a 100644
--- a/docs/templating/twig_function_reference/product_twig_functions.md
+++ b/docs/templating/twig_function_reference/product_twig_functions.md
@@ -11,7 +11,7 @@ The `ibexa_get_product()` filter gets the selected product based on either a pro
 
 #### Examples
 
-``` hmml+twig
+``` html+twig
 {{ (product|ibexa_get_product).code }}
 {{ (content|ibexa_get_product).code }}
 ```
@@ -146,4 +146,4 @@ The `ibexa_product_catalog_group_attributes` filter groups product attributes ba
         {% endfor %}
     </ul>
 {% endfor %}
-```
\ No newline at end of file
+```
diff --git a/docs/templating/twig_function_reference/twig_function_reference.md b/docs/templating/twig_function_reference/twig_function_reference.md
index fa8ef890fa..301f9f9cc1 100644
--- a/docs/templating/twig_function_reference/twig_function_reference.md
+++ b/docs/templating/twig_function_reference/twig_function_reference.md
@@ -12,6 +12,7 @@ In addition to the [native functions provided by Twig](https://twig.symfony.com/
     "templating/twig_function_reference/catalog_twig_functions",
     "templating/twig_function_reference/checkout_twig_functions",
     "templating/twig_function_reference/content_twig_functions",
+    "templating/twig_function_reference/component_twig_functions",
     "templating/twig_function_reference/field_twig_functions",
     "templating/twig_function_reference/product_twig_functions",
     "templating/twig_function_reference/site_context_twig_functions",
diff --git a/docs/users/oauth_client.md b/docs/users/oauth_client.md
index 6c266f589d..d845806a97 100644
--- a/docs/users/oauth_client.md
+++ b/docs/users/oauth_client.md
@@ -110,7 +110,7 @@ Create the following template file in `templates/themes/admin/account/login/oaut
 
 For more information about the OAuth connection URL Twig functions, see [`ibexa_oauth2_connect_path`](url_twig_functions.md#ibexa_oauth2_connect_path) and [`ibexa_oauth2_connect_url`](url_twig_functions.md#ibexa_oauth2_connect_url).
 
-Finally, add the template to the login form by using the `login-form-after` [component](custom_components.md):
+Finally, add the template to the login form by using the `admin-ui-login-form-after` [Twig component group](components.md):
 
 ``` yaml
 services:
diff --git a/mkdocs.yml b/mkdocs.yml
index a5417e1330..eb7932e9b0 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -99,6 +99,7 @@ nav:
             - Site events: api/event_reference/site_events.md
             - URL events: api/event_reference/url_events.md
             - Trash events: api/event_reference/trash_events.md
+            - Twig Components: api/event_reference/twig_component_events.md
             - AI Action events: api/event_reference/ai_action_events.md
             - Other events: api/event_reference/other_events.md
     - Administration:
@@ -299,6 +300,7 @@ nav:
             - Cart Twig functions: templating/twig_function_reference/cart_twig_functions.md
             - Catalog Twig functions: templating/twig_function_reference/catalog_twig_functions.md
             - Checkout Twig functions: templating/twig_function_reference/checkout_twig_functions.md
+            - Component Twig functions: templating/twig_function_reference/component_twig_functions.md
             - Content Twig functions: templating/twig_function_reference/content_twig_functions.md
             - Date Twig filters: templating/twig_function_reference/date_twig_filters.md
             - Field Twig functions: templating/twig_function_reference/field_twig_functions.md
@@ -310,6 +312,7 @@ nav:
             - URL Twig functions: templating/twig_function_reference/url_twig_functions.md
             - User Twig functions: templating/twig_function_reference/user_twig_functions.md
             - AI Twig functions: templating/twig_function_reference/ai_actions_twig_functions.md
+        - Twig Components: templating/components.md
         - URLs and routes:
             - URLs and routes: templating/urls_and_routes/urls_and_routes.md
             - Custom breadcrumbs: templating/urls_and_routes/custom_breadcrumbs.md