diff --git a/apps/showcase/doc/cdn/ExampleDoc.vue b/apps/showcase/doc/cdn/ExampleDoc.vue
index 8e2498e79..7e976e491 100644
--- a/apps/showcase/doc/cdn/ExampleDoc.vue
+++ b/apps/showcase/doc/cdn/ExampleDoc.vue
@@ -20,8 +20,8 @@ export default {
   </head>
   <body>
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
-    <script src="https://unpkg.com/primevue@4.0.0-beta.4/umd/primevue.min.js"><\/script>
-    <script src="https://unpkg.com/primevue@4.0.0-beta.4/umd/themes/aura.min.js"><\/script>
+    <script src="https://unpkg.com/primevue@4.0.0-rc.1/umd/primevue.min.js"><\/script>
+    <script src="https://unpkg.com/@primevue/themes@4.0.0-rc.1/umd/aura.min.js"><\/script>
 
     <div id="app">
       <p-datepicker v-model="date"></p-datepicker>
diff --git a/apps/showcase/doc/cdn/ScriptDoc.vue b/apps/showcase/doc/cdn/ScriptDoc.vue
index 65c7959aa..3029ae025 100644
--- a/apps/showcase/doc/cdn/ScriptDoc.vue
+++ b/apps/showcase/doc/cdn/ScriptDoc.vue
@@ -16,8 +16,8 @@ export default {
             code: {
                 basic: `
 https://unpkg.com/vue@3/dist/vue.global.js
-https://unpkg.com/primevue@4.0.0-beta.4/umd/primevue.min.js
-https://unpkg.com/primevue@4.0.0-beta.4/umd/themes/aura.min.js  // see theming for alternatives
+https://unpkg.com/primevue@4.0.0-rc.1/umd/primevue.min.js
+https://unpkg.com/@primevue/themes@4.0.0-rc.1/umd/aura.min.js  // see theming for alternatives
 `
             }
         };
diff --git a/apps/showcase/doc/cdn/ThemingDoc.vue b/apps/showcase/doc/cdn/ThemingDoc.vue
index dc5a44983..2ef654e10 100644
--- a/apps/showcase/doc/cdn/ThemingDoc.vue
+++ b/apps/showcase/doc/cdn/ThemingDoc.vue
@@ -11,11 +11,11 @@ export default {
         return {
             code: {
                 basic: `
-<!-- <script src="https://unpkg.com/primevue@4.0.0-beta.4/umd/themes/{preset}.min.js"><\/script> -->
+<!-- <script src="https://unpkg.com/@primevue/themes@4.0.0-rc.1/umd/{preset}.min.js"><\/script> -->
 
-<script src="https://unpkg.com/primevue@4.0.0-beta.4/umd/themes/aura.min.js"><\/script>
-<script src="https://unpkg.com/primevue@4.0.0-beta.4/umd/themes/lara.min.js"><\/script>
-<script src="https://unpkg.com/primevue@4.0.0-beta.4/umd/themes/nora.min.js"><\/script>
+<script src="https://unpkg.com/@primevue/themes@4.0.0-rc.1/umd/aura.min.js"><\/script>
+<script src="https://unpkg.com/@primevue/themes@4.0.0-rc.1/umd/lara.min.js"><\/script>
+<script src="https://unpkg.com/@primevue/themes@4.0.0-rc.1/umd/nora.min.js"><\/script>
 `
             }
         };
diff --git a/apps/showcase/doc/nuxt/DownloadDoc.vue b/apps/showcase/doc/nuxt/DownloadDoc.vue
index 02035663a..b09da6a62 100644
--- a/apps/showcase/doc/nuxt/DownloadDoc.vue
+++ b/apps/showcase/doc/nuxt/DownloadDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm Registry</a> along with the official
-            <a href="https://www.npmjs.com/package/nuxt-primevue" target="_blank" rel="noopener noreferrer">nuxt-primevue</a> module.
+            <a href="https://www.npmjs.com/package/@primevue/nuxt-module" target="_blank" rel="noopener noreferrer">nuxt-primevue</a> module.
         </p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
@@ -15,16 +15,16 @@ export default {
             code: {
                 basic: `
 # Using npm
-npm install primevue@4.0.0-beta.4
-npm install --save-dev nuxt-primevue@4.0.0-beta.4
+npm install primevue@4.0.0-rc.1
+npm install --save-dev @primevue/nuxt-module@4.0.0-rc.1
 
 # Using yarn
-yarn add primevue@4.0.0-beta.4
-yarn add --dev nuxt-primevue@4.0.0-beta.4
+yarn add primevue@4.0.0-rc.1
+yarn add --dev @primevue/nuxt-module@4.0.0-rc.1
 
 # Using pnpm
-pnpm add primevue@4.0.0-beta.4
-pnpm add -D nuxt-primevue@4.0.0-beta.4
+pnpm add primevue@4.0.0-rc.1
+pnpm add -D @primevue/nuxt-module@4.0.0-rc.1
 `
             }
         };
diff --git a/apps/showcase/doc/nuxt/SetupDoc.vue b/apps/showcase/doc/nuxt/SetupDoc.vue
index b31762566..f231af691 100644
--- a/apps/showcase/doc/nuxt/SetupDoc.vue
+++ b/apps/showcase/doc/nuxt/SetupDoc.vue
@@ -1,8 +1,8 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            In <i>nuxt.config</i> file, add the <i>nuxt-primevue</i> to the modules section and define <i>primevue</i> object for the configuration of the module. View the <NuxtLink to="/nuxt/#configuration">module configuration</NuxtLink> section
-            for the available list of options.
+            In <i>nuxt.config</i> file, add the <i>@primevue/nuxt-module</i> to the modules section and define <i>primevue</i> object for the configuration of the module. View the
+            <NuxtLink to="/nuxt/#configuration">module configuration</NuxtLink> section for the available list of options.
         </p>
         <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
@@ -16,7 +16,7 @@ export default {
                 basic: `
 export default defineNuxtConfig({
     modules: [
-        'nuxt-primevue'
+        '@primevue/nuxt-module'
     ],
     primevue: {
         /* Options */
diff --git a/apps/showcase/doc/vite/DownloadDoc.vue b/apps/showcase/doc/vite/DownloadDoc.vue
index 9c206379e..160bb94a3 100644
--- a/apps/showcase/doc/vite/DownloadDoc.vue
+++ b/apps/showcase/doc/vite/DownloadDoc.vue
@@ -12,13 +12,13 @@ export default {
             code: {
                 basic: `
 # Using npm
-npm install primevue@4.0.0-beta.4
+npm install primevue@4.0.0-rc.1
 
 # Using yarn
-yarn add primevue@4.0.0-beta.4
+yarn add primevue@4.0.0-rc.1
 
 # Using pnpm
-pnpm add primevue@4.0.0-beta.4
+pnpm add primevue@4.0.0-rc.1
 `
             }
         };
diff --git a/apps/showcase/doc/vite/StyledModeDoc.vue b/apps/showcase/doc/vite/StyledModeDoc.vue
index 8fe98cadf..f9a9e43b3 100644
--- a/apps/showcase/doc/vite/StyledModeDoc.vue
+++ b/apps/showcase/doc/vite/StyledModeDoc.vue
@@ -1,15 +1,30 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>Styled mode provides pre-skinned components, default theme is Aura with emerald as the primary color. See the <NuxtLink to="/theming/styled">styled mode</NuxtLink> documentation for details.</p>
+        <p>Install the <i>@primevue/themes</i> add-on package as the themes are not included in PrimeVue by default.</p>
+        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
+        <p>Configure PrimeVue to use a theme like Aura.</p>
+        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
+            code1: {
+                basic: `
+# Using npm
+npm install @primevue/themes@4.0.0-rc.1
+
+# Using yarn
+yarn add @primevue/themes@4.0.0-rc.1
+
+# Using pnpm
+pnpm add @primevue/themes@4.0.0-rc.1
+`
+            },
+            code2: {
                 basic: `
 import { createApp } from 'vue';
 import PrimeVue from 'primevue/config';
diff --git a/apps/showcase/doc/vite/UsageDoc.vue b/apps/showcase/doc/vite/UsageDoc.vue
index 571c29702..72d30c43d 100644
--- a/apps/showcase/doc/vite/UsageDoc.vue
+++ b/apps/showcase/doc/vite/UsageDoc.vue
@@ -1,8 +1,8 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Each component can be imported and registered individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component. In a future update with a vite plugin, components would be
-            imported automatically and optimized with tree shaking at build time.
+            Each component can be imported and registered individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component. If you prefer importing components manually, view the
+            <NuxtLink to="/autoimport">autoimport</NuxtLink> guide.
         </p>
     </DocSectionText>
     <div class="card flex justify-center">
