diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json
index 94d747f66..bf2dec0ea 100644
--- a/apps/showcase/assets/menu/menu.json
+++ b/apps/showcase/assets/menu/menu.json
@@ -551,6 +551,10 @@
                     "name": "Accessibility",
                     "to": "/guides/accessibility"
                 },
+                {
+                    "name": "Dynamic Imports",
+                    "to": "/guides/dynamicimports"
+                },
                 {
                     "name": "Migration to V4",
                     "to": "/guides/migration/v4"
diff --git a/apps/showcase/doc/guides/dynamicimports/OverviewDoc.vue b/apps/showcase/doc/guides/dynamicimports/OverviewDoc.vue
new file mode 100644
index 000000000..e4035659e
--- /dev/null
+++ b/apps/showcase/doc/guides/dynamicimports/OverviewDoc.vue
@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>With <i>@primevue/icons</i> for icons and <i>primevue</i> for components (except Editor and Chart), multiple items can be imported together.</p>
+    </DocSectionText>
+    <pre v-code><code>
+import { Button, InputText } from 'primevue';
+import { SearchIcon, BellIcon } from '@primevue/icons';
+
+</code></pre>
+    <div class="doc-section-description mt-4">
+        <p>On the other hand, they enable the loading of multiple items from a specific structure as needed, making code management easier.</p>
+    </div>
+    <pre v-code><code>
+&lt;script setup&gt;
+import * as PrimeVue from 'primevue';
+
+const items = [
+    { as: 'Button', class: 'my-button-class' },
+    { as: 'InputText', class: 'my-inputtext-class' }
+};
+&lt;/script&gt;
+
+&lt;template&gt;
+    &lt;component v-for="item of items" :is="PrimeVue[item.as]" :class="item.class" /&gt;
+&lt;/template&gt;
+
+</code></pre>
+</template>
diff --git a/apps/showcase/pages/guides/dynamicimports/index.vue b/apps/showcase/pages/guides/dynamicimports/index.vue
new file mode 100644
index 000000000..e75f5cb9b
--- /dev/null
+++ b/apps/showcase/pages/guides/dynamicimports/index.vue
@@ -0,0 +1,34 @@
+<template>
+    <Head>
+        <Title>PrimeFlex - Dynamic Imports</Title>
+        <Meta name="description" content="Dynamic imports enable the loading of multiple items as needed, streamlining the import process." />
+    </Head>
+    <div class="doc">
+        <div class="doc-main">
+            <div class="doc-intro">
+                <h1>Dynamic Imports</h1>
+                <p>Dynamic imports enable the loading of multiple items as needed, streamlining the import process.</p>
+            </div>
+            <DocSections :docs="docs" />
+        </div>
+        <DocSectionNav :docs="docs" />
+    </div>
+</template>
+
+<script>
+import OverviewDoc from '@/doc/guides/dynamicimports/OverviewDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'overview',
+                    label: 'Overview',
+                    component: OverviewDoc
+                }
+            ]
+        };
+    }
+};
+</script>
