diff --git a/apps/labs/doc/inputtext/BasicDoc.vue b/apps/labs/doc/inputtext/BasicDoc.vue
index 808d8d030..3f5a8af4f 100644
--- a/apps/labs/doc/inputtext/BasicDoc.vue
+++ b/apps/labs/doc/inputtext/BasicDoc.vue
@@ -3,13 +3,13 @@
         <p>InputText is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" />
+        <InputText v-model="value" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" />
+        <InputText v-model="value" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/DisabledDoc.vue b/apps/labs/doc/inputtext/DisabledDoc.vue
index 5f49abbd5..ad9392c47 100644
--- a/apps/labs/doc/inputtext/DisabledDoc.vue
+++ b/apps/labs/doc/inputtext/DisabledDoc.vue
@@ -3,13 +3,13 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" disabled placeholder="Disabled" />
+        <InputText v-model="value" disabled placeholder="Disabled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" disabled placeholder="Disabled" />
+        <InputText v-model="value" disabled placeholder="Disabled" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/FilledDoc.vue b/apps/labs/doc/inputtext/FilledDoc.vue
index 45964821d..c5efb8e1d 100644
--- a/apps/labs/doc/inputtext/FilledDoc.vue
+++ b/apps/labs/doc/inputtext/FilledDoc.vue
@@ -3,13 +3,13 @@
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" variant="filled" />
+        <InputText v-model="value" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" variant="filled" />
+        <InputText v-model="value" variant="filled" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/HelpTextDoc.vue b/apps/labs/doc/inputtext/HelpTextDoc.vue
index 1fbc2e94f..5a1def75b 100644
--- a/apps/labs/doc/inputtext/HelpTextDoc.vue
+++ b/apps/labs/doc/inputtext/HelpTextDoc.vue
@@ -3,13 +3,13 @@
         <p>An advisory text can be defined with the <NuxtLink to="/message">Message</NuxtLink> component.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" type="text" />
+        <InputText v-model="value" type="text" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" type="text" />
+        <InputText v-model="value" type="text" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/ImportDoc.vue b/apps/labs/doc/inputtext/ImportDoc.vue
index a44b8a5ce..435eb2576 100644
--- a/apps/labs/doc/inputtext/ImportDoc.vue
+++ b/apps/labs/doc/inputtext/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 `
         };
     }
diff --git a/apps/labs/doc/inputtext/InvalidDoc.vue b/apps/labs/doc/inputtext/InvalidDoc.vue
index 0ca50704d..089b7c81d 100644
--- a/apps/labs/doc/inputtext/InvalidDoc.vue
+++ b/apps/labs/doc/inputtext/InvalidDoc.vue
@@ -3,13 +3,13 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" :invalid="!value" placeholder="Name" />
+        <InputText v-model="value" :invalid="!value" placeholder="Name" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref('');
@@ -17,12 +17,12 @@ const value = ref('');
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" :invalid="!value" placeholder="Name" />
+        <InputText v-model="value" :invalid="!value" placeholder="Name" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/inputtext/SizesDoc.vue b/apps/labs/doc/inputtext/SizesDoc.vue
index bc1f099da..ef8d36b51 100644
--- a/apps/labs/doc/inputtext/SizesDoc.vue
+++ b/apps/labs/doc/inputtext/SizesDoc.vue
@@ -3,15 +3,15 @@
         <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-4">
-        <PlexInputText v-model="value1" type="text" size="small" placeholder="Small" />
-        <PlexInputText v-model="value2" type="text" placeholder="Normal" />
-        <PlexInputText v-model="value3" type="text" size="large" placeholder="Large" />
+        <InputText v-model="value1" type="text" size="small" placeholder="Small" />
+        <InputText v-model="value2" type="text" placeholder="Normal" />
+        <InputText v-model="value3" type="text" size="large" placeholder="Large" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value1 = ref(null);
@@ -21,14 +21,14 @@ const value3 = ref(null);
 const code = ref(`
 <template>
     <div class="card flex flex-col items-center gap-4">
-        <PlexInputText v-model="value1" type="text" size="small" placeholder="Small" />
-        <PlexInputText v-model="value2" type="text" placeholder="Normal" />
-        <PlexInputText v-model="value3" type="text" size="large" placeholder="Large" />
+        <InputText v-model="value1" type="text" size="small" placeholder="Small" />
+        <InputText v-model="value2" type="text" placeholder="Normal" />
+        <InputText v-model="value3" type="text" size="large" placeholder="Large" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value1 = ref(null);
diff --git a/apps/labs/doc/slider/BasicDoc.vue b/apps/labs/doc/slider/BasicDoc.vue
index ae79d7491..d276012c8 100644
--- a/apps/labs/doc/slider/BasicDoc.vue
+++ b/apps/labs/doc/slider/BasicDoc.vue
@@ -3,13 +3,13 @@
         <p>Slider is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" class="w-56" />
+        <Slider v-model="value" class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" class="w-56" />
+        <Slider v-model="value" class="w-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/slider/FilterDoc.vue b/apps/labs/doc/slider/FilterDoc.vue
index 7d076a045..eaaf1124f 100644
--- a/apps/labs/doc/slider/FilterDoc.vue
+++ b/apps/labs/doc/slider/FilterDoc.vue
@@ -3,13 +3,13 @@
         <p>Image filter implementation using multiple sliders.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" class="w-56" />
+        <Slider v-model="value" class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" class="w-56" />
+        <Slider v-model="value" class="w-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/slider/ImportDoc.vue b/apps/labs/doc/slider/ImportDoc.vue
index 3f28ba385..e265faeac 100644
--- a/apps/labs/doc/slider/ImportDoc.vue
+++ b/apps/labs/doc/slider/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 `
         };
     }
diff --git a/apps/labs/doc/slider/InputDoc.vue b/apps/labs/doc/slider/InputDoc.vue
index ef0fa1fc7..4e507047e 100644
--- a/apps/labs/doc/slider/InputDoc.vue
+++ b/apps/labs/doc/slider/InputDoc.vue
@@ -4,16 +4,16 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <div class="w-56">
-            <PlexInputText v-model.number="value" class="w-full mb-4" />
-            <PlexSlider v-model="value" class="w-full" />
+            <InputText v-model.number="value" class="w-full mb-4" />
+            <Slider v-model="value" class="w-full" />
         </div>
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
-import PlexSlider from '@/plex/slider';
+import InputText from '@/plex/inputtext';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(50);
@@ -21,14 +21,14 @@ const value = ref(50);
 const code = ref(`
 <div class="card flex justify-center">
     <div class="w-56">
-        <PlexInputText v-model.number="value" class="w-full mb-4" />
-        <PlexSlider v-model="value" class="w-full" />
+        <InputText v-model.number="value" class="w-full mb-4" />
+        <Slider v-model="value" class="w-full" />
     </div>
 </div>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
-import PlexSlider from '@/plex/slider';
+import InputText from '@/plex/inputtext';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(50);
diff --git a/apps/labs/doc/slider/RangeDoc.vue b/apps/labs/doc/slider/RangeDoc.vue
index fd1d9d7f7..befae54ee 100644
--- a/apps/labs/doc/slider/RangeDoc.vue
+++ b/apps/labs/doc/slider/RangeDoc.vue
@@ -3,13 +3,13 @@
         <p>When <i>range</i> property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" range class="w-56" />
+        <Slider v-model="value" range class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref([20, 80]);
@@ -17,12 +17,12 @@ const value = ref([20, 80]);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" range class="w-56" />
+        <Slider v-model="value" range class="w-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref([20, 80]);
diff --git a/apps/labs/doc/slider/StepDoc.vue b/apps/labs/doc/slider/StepDoc.vue
index 8234a958a..909fb6b59 100644
--- a/apps/labs/doc/slider/StepDoc.vue
+++ b/apps/labs/doc/slider/StepDoc.vue
@@ -3,13 +3,13 @@
         <p>Size of each movement is defined with the <i>step</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" :step="20" class="w-56" />
+        <Slider v-model="value" :step="20" class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(20);
@@ -17,12 +17,12 @@ const value = ref(20);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" :step="20" class="w-56" />
+        <Slider v-model="value" :step="20" class="w-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(20);
diff --git a/apps/labs/doc/slider/VerticalDoc.vue b/apps/labs/doc/slider/VerticalDoc.vue
index cf140da7e..146281d0c 100644
--- a/apps/labs/doc/slider/VerticalDoc.vue
+++ b/apps/labs/doc/slider/VerticalDoc.vue
@@ -3,13 +3,13 @@
         <p>Default layout of slider is <i>horizontal</i>, use <i>orientation</i> property for the alternative <i>vertical</i> mode.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" orientation="vertical" class="h-56" />
+        <Slider v-model="value" orientation="vertical" class="h-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(50);
@@ -17,12 +17,12 @@ const value = ref(50);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexSlider v-model="value" orientation="vertical" class="h-56" />
+        <Slider v-model="value" orientation="vertical" class="h-56" />
     </div>
 </template>
 
 <script setup>
-import PlexSlider from '@/plex/slider';
+import Slider from '@/plex/slider';
 import { ref } from 'vue';
 
 const value = ref(50);
diff --git a/apps/labs/doc/textarea/AutoResizeDoc.vue b/apps/labs/doc/textarea/AutoResizeDoc.vue
index ca27131d0..de2bc47e0 100644
--- a/apps/labs/doc/textarea/AutoResizeDoc.vue
+++ b/apps/labs/doc/textarea/AutoResizeDoc.vue
@@ -3,13 +3,13 @@
         <p>When <i>autoResize</i> is enabled, textarea grows instead of displaying a scrollbar.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" autoResize rows="5" cols="30" />
+        <Textarea v-model="value" autoResize rows="5" cols="30" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" autoResize rows="5" cols="30" />
+        <Textarea v-model="value" autoResize rows="5" cols="30" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/BasicDoc.vue b/apps/labs/doc/textarea/BasicDoc.vue
index f97998330..8474194c0 100644
--- a/apps/labs/doc/textarea/BasicDoc.vue
+++ b/apps/labs/doc/textarea/BasicDoc.vue
@@ -3,13 +3,13 @@
         <p>Textarea is used with the <i>v-model</i> property for two-way value binding.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" class="resize-none" />
+        <Textarea v-model="value" rows="5" cols="30" class="resize-none" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" class="resize-none" />
+        <Textarea v-model="value" rows="5" cols="30" class="resize-none" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/DisabledDoc.vue b/apps/labs/doc/textarea/DisabledDoc.vue
index 380915ef1..1421cd0e6 100644
--- a/apps/labs/doc/textarea/DisabledDoc.vue
+++ b/apps/labs/doc/textarea/DisabledDoc.vue
@@ -3,13 +3,13 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
+        <Textarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
      <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
+        <Textarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/FilledDoc.vue b/apps/labs/doc/textarea/FilledDoc.vue
index 0625d2c19..9d4c9382b 100644
--- a/apps/labs/doc/textarea/FilledDoc.vue
+++ b/apps/labs/doc/textarea/FilledDoc.vue
@@ -3,13 +3,13 @@
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" variant="filled" />
+        <Textarea v-model="value" rows="5" cols="30" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" variant="filled" />
+        <Textarea v-model="value" rows="5" cols="30" variant="filled" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/HelpTextDoc.vue b/apps/labs/doc/textarea/HelpTextDoc.vue
index 1fbc2e94f..5a1def75b 100644
--- a/apps/labs/doc/textarea/HelpTextDoc.vue
+++ b/apps/labs/doc/textarea/HelpTextDoc.vue
@@ -3,13 +3,13 @@
         <p>An advisory text can be defined with the <NuxtLink to="/message">Message</NuxtLink> component.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" type="text" />
+        <InputText v-model="value" type="text" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -17,12 +17,12 @@ const value = ref(null);
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexInputText v-model="value" type="text" />
+        <InputText v-model="value" type="text" />
     </div>
 </template>
 
 <script setup>
-import PlexInputText from '@/plex/inputtext';
+import InputText from '@/plex/inputtext';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/ImportDoc.vue b/apps/labs/doc/textarea/ImportDoc.vue
index c6dfc67e2..d50fe1a9b 100644
--- a/apps/labs/doc/textarea/ImportDoc.vue
+++ b/apps/labs/doc/textarea/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 `
         };
     }
diff --git a/apps/labs/doc/textarea/InvalidDoc.vue b/apps/labs/doc/textarea/InvalidDoc.vue
index 83596e85b..140bc6e9a 100644
--- a/apps/labs/doc/textarea/InvalidDoc.vue
+++ b/apps/labs/doc/textarea/InvalidDoc.vue
@@ -3,13 +3,13 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref('');
@@ -17,12 +17,12 @@ const value = ref('');
 const code = ref(`
 <template>
     <div class="card flex justify-center">
-        <PlexTextarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/labs/doc/textarea/SizesDoc.vue b/apps/labs/doc/textarea/SizesDoc.vue
index d060672a7..e863109b6 100644
--- a/apps/labs/doc/textarea/SizesDoc.vue
+++ b/apps/labs/doc/textarea/SizesDoc.vue
@@ -3,15 +3,15 @@
         <p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center gap-4">
-        <PlexTextarea v-model="value1" size="small" placeholder="Small" rows="3" />
-        <PlexTextarea v-model="value2" placeholder="Normal" rows="3" />
-        <PlexTextarea v-model="value3" size="large" placeholder="Large" rows="3" />
+        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <Textarea v-model="value2" placeholder="Normal" rows="3" />
+        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
     </div>
     <DocSectionCode :code="code" />
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value1 = ref(null);
@@ -21,14 +21,14 @@ const value3 = ref(null);
 const code = ref(`
 <template>
 <div class="card flex flex-col items-center gap-4">
-        <PlexTextarea v-model="value1" size="small" placeholder="Small" rows="3" />
-        <PlexTextarea v-model="value2" placeholder="Normal" rows="3" />
-        <PlexTextarea v-model="value3" size="large" placeholder="Large" rows="3" />
+        <Textarea v-model="value1" size="small" placeholder="Small" rows="3" />
+        <Textarea v-model="value2" placeholder="Normal" rows="3" />
+        <Textarea v-model="value3" size="large" placeholder="Large" rows="3" />
     </div>
 </template>
 
 <script setup>
-import PlexTextarea from '@/plex/textarea';
+import Textarea from '@/plex/textarea';
 import { ref } from 'vue';
 
 const value1 = ref(null);
diff --git a/apps/labs/nuxt.config.js b/apps/labs/nuxt.config.js
index f2662526b..ed3a4ccea 100644
--- a/apps/labs/nuxt.config.js
+++ b/apps/labs/nuxt.config.js
@@ -34,6 +34,9 @@ export default defineNuxtConfig({
     runtimeConfig: {
         GITHUB_TOKEN: ''
     },
+    primevue: {
+        autoImport: false
+    },
     app: {
         baseURL: baseUrl,
         head: {