diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue
index a298f256b..35d477236 100755
--- a/components/lib/accordion/Accordion.vue
+++ b/components/lib/accordion/Accordion.vue
@@ -41,13 +41,13 @@
 </template>
 
 <script>
-import ComponentBase from 'primevue/componentbase';
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Accordion',
-    extends: ComponentBase,
+    extends: BaseComponent,
     emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
     props: {
         multiple: {
diff --git a/components/lib/accordiontab/AccordionTab.vue b/components/lib/accordiontab/AccordionTab.vue
index 325861602..5e189784e 100755
--- a/components/lib/accordiontab/AccordionTab.vue
+++ b/components/lib/accordiontab/AccordionTab.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-import ComponentBase from 'primevue/componentbase';
+import BaseComponent from 'primevue/basecomponent';
 
 export default {
     name: 'AccordionTab',
-    extends: ComponentBase,
+    extends: BaseComponent,
     props: {
         header: null,
         headerStyle: null,
diff --git a/components/lib/componentbase/ComponentBase.vue b/components/lib/basecomponent/BaseComponent.vue
similarity index 95%
rename from components/lib/componentbase/ComponentBase.vue
rename to components/lib/basecomponent/BaseComponent.vue
index 829a748fd..965c3b31f 100644
--- a/components/lib/componentbase/ComponentBase.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -2,7 +2,7 @@
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
-    name: 'ComponentBase',
+    name: 'BaseComponent',
     props: {
         pt: {
             type: Object,
diff --git a/components/lib/basecomponent/package.json b/components/lib/basecomponent/package.json
new file mode 100644
index 000000000..1133b654f
--- /dev/null
+++ b/components/lib/basecomponent/package.json
@@ -0,0 +1,8 @@
+{
+  "main": "./basecomponent.cjs.js",
+  "module": "./basecomponent.esm.js",
+  "unpkg": "./basecomponent.min.js",
+  "browser": {
+    "./sfc": "./BaseComponent.vue"
+  }
+}
\ No newline at end of file
diff --git a/components/lib/card/Card.vue b/components/lib/card/Card.vue
index ead3c5b81..537775e72 100755
--- a/components/lib/card/Card.vue
+++ b/components/lib/card/Card.vue
@@ -21,10 +21,10 @@
 </template>
 
 <script>
-import ComponentBase from 'primevue/componentbase';
+import BaseComponent from 'primevue/basecomponent';
 
 export default {
     name: 'Card',
-    extends: ComponentBase
+    extends: BaseComponent
 };
 </script>
diff --git a/components/lib/componentbase/package.json b/components/lib/componentbase/package.json
deleted file mode 100644
index 8605318c7..000000000
--- a/components/lib/componentbase/package.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "main": "./componentbase.cjs.js",
-  "module": "./componentbase.esm.js",
-  "unpkg": "./componentbase.min.js",
-  "browser": {
-    "./sfc": "./ComponentBase.vue"
-  }
-}
\ No newline at end of file
diff --git a/components/lib/deferredcontent/DeferredContent.vue b/components/lib/deferredcontent/DeferredContent.vue
index 6c5944151..a7b93e0ab 100755
--- a/components/lib/deferredcontent/DeferredContent.vue
+++ b/components/lib/deferredcontent/DeferredContent.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import ComponentBase from 'primevue/componentbase';
+import BaseComponent from 'primevue/basecomponent';
 
 export default {
     name: 'DeferredContent',
-    extends: ComponentBase,
+    extends: BaseComponent,
     emits: ['load'],
     data() {
         return {
diff --git a/components/lib/divider/Divider.vue b/components/lib/divider/Divider.vue
index 872dfb375..ae70479c3 100644
--- a/components/lib/divider/Divider.vue
+++ b/components/lib/divider/Divider.vue
@@ -7,10 +7,10 @@
 </template>
 
 <script>
-import ComponentBase from 'primevue/componentbase';
+import BaseComponent from 'primevue/basecomponent';
 export default {
     name: 'Divider',
-    extends: ComponentBase,
+    extends: BaseComponent,
     props: {
         align: {
             type: String,
diff --git a/components/lib/fieldset/Fieldset.vue b/components/lib/fieldset/Fieldset.vue
index 0002258b5..e570ec442 100755
--- a/components/lib/fieldset/Fieldset.vue
+++ b/components/lib/fieldset/Fieldset.vue
@@ -36,13 +36,13 @@
 </template>
 
 <script>
-import ComponentBase from 'primevue/componentbase';
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Fieldset',
-    extends: ComponentBase,
+    extends: BaseComponent,
     emits: ['update:collapsed', 'toggle'],
     props: {
         legend: String,
diff --git a/components/lib/panel/Panel.vue b/components/lib/panel/Panel.vue
index af4f2ed2d..a21f0b06a 100755
--- a/components/lib/panel/Panel.vue
+++ b/components/lib/panel/Panel.vue
@@ -40,13 +40,13 @@
 </template>
 
 <script>
-import ComponentBase from 'primevue/componentbase';
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Panel',
-    extends: ComponentBase,
+    extends: BaseComponent,
     emits: ['update:collapsed', 'toggle'],
     props: {
         header: String,
diff --git a/components/lib/scrollpanel/ScrollPanel.vue b/components/lib/scrollpanel/ScrollPanel.vue
index eda656b99..5fdec645b 100644
--- a/components/lib/scrollpanel/ScrollPanel.vue
+++ b/components/lib/scrollpanel/ScrollPanel.vue
@@ -36,12 +36,12 @@
 </template>
 
 <script>
-import ComponentBase from 'primevue/componentbase';
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ScrollPanel',
-    extends: ComponentBase,
+    extends: BaseComponent,
     props: {
         step: {
             type: Number,
diff --git a/components/lib/splitter/Splitter.vue b/components/lib/splitter/Splitter.vue
index 99f65a70c..0f7f6e66b 100644
--- a/components/lib/splitter/Splitter.vue
+++ b/components/lib/splitter/Splitter.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script>
-import ComponentBase from 'primevue/componentbase';
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Splitter',
-    extends: ComponentBase,
+    extends: BaseComponent,
     emits: ['resizestart', 'resizeend'],
     props: {
         layout: {
diff --git a/components/lib/splitterpanel/SplitterPanel.vue b/components/lib/splitterpanel/SplitterPanel.vue
index 35a2341e2..fcf7fb6de 100644
--- a/components/lib/splitterpanel/SplitterPanel.vue
+++ b/components/lib/splitterpanel/SplitterPanel.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script>
-import ComponentBase from 'primevue/componentbase';
+import BaseComponent from 'primevue/basecomponent';
 
 export default {
     name: 'SplitterPanel',
-    extends: ComponentBase,
+    extends: BaseComponent,
     props: {
         size: {
             type: Number,
diff --git a/components/lib/tabpanel/TabPanel.vue b/components/lib/tabpanel/TabPanel.vue
index 48719cf54..bf9a3016d 100755
--- a/components/lib/tabpanel/TabPanel.vue
+++ b/components/lib/tabpanel/TabPanel.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script>
-import ComponentBase from 'primevue/componentbase';
+import BaseComponent from 'primevue/basecomponent';
 export default {
     name: 'TabPanel',
-    extends: ComponentBase,
+    extends: BaseComponent,
     props: {
         header: null,
         headerStyle: null,
diff --git a/components/lib/tabview/TabView.vue b/components/lib/tabview/TabView.vue
index 3662ec28f..195838a75 100755
--- a/components/lib/tabview/TabView.vue
+++ b/components/lib/tabview/TabView.vue
@@ -82,13 +82,13 @@
 </template>
 
 <script>
-import ComponentBase from 'primevue/componentbase';
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'TabView',
-    extends: ComponentBase,
+    extends: BaseComponent,
     emits: ['update:activeIndex', 'tab-change', 'tab-click'],
     props: {
         activeIndex: {
diff --git a/components/lib/toolbar/Toolbar.vue b/components/lib/toolbar/Toolbar.vue
index 1fac574f9..8328166a8 100755
--- a/components/lib/toolbar/Toolbar.vue
+++ b/components/lib/toolbar/Toolbar.vue
@@ -13,10 +13,10 @@
 </template>
 
 <script>
-import ComponentBase from 'primevue/componentbase';
+import BaseComponent from 'primevue/basecomponent';
 export default {
     name: 'Toolbar',
-    extends: ComponentBase,
+    extends: BaseComponent,
     props: {
         'aria-labelledby': {
             type: String,