diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js
new file mode 100644
index 000000000..c01c9501c
--- /dev/null
+++ b/components/lib/basedirective/BaseDirective.js
@@ -0,0 +1,70 @@
+import { DomHandler, ObjectUtils } from 'primevue/utils';
+
+export const BaseDirective = {
+    directiveElement: null,
+    extend: (directiveName, hooks) => {
+        return {
+            created: (el, binding, vnode, prevVnode) => {
+                hooks['created'] && hooks['created'](el, binding, vnode, prevVnode);
+                BaseDirective.handleHook(directiveName, 'created', el, binding, vnode, prevVnode);
+            },
+            beforeMount: (el, binding, vnode, prevVnode) => {
+                hooks['beforeMount'] && hooks['beforeMount'](el, binding, vnode, prevVnode);
+                BaseDirective.handleHook(directiveName, 'beforeMount', el, binding, vnode, prevVnode);
+            },
+            mounted: (el, binding, vnode, prevVnode) => {
+                hooks['mounted'] && hooks['mounted'](el, binding, vnode, prevVnode);
+                BaseDirective.handleHook(directiveName, 'mounted', el, binding, vnode, prevVnode);
+            },
+            beforeUpdate: (el, binding, vnode, prevVnode) => {
+                hooks['beforeUpdate'] && hooks['beforeUpdate'](el, binding, vnode, prevVnode);
+                BaseDirective.handleHook(directiveName, 'beforeUpdate', el, binding, vnode, prevVnode);
+            },
+            updated: (el, binding, vnode, prevVnode) => {
+                hooks['updated'] && hooks['updated'](el, binding, vnode, prevVnode);
+                BaseDirective.handleHook(directiveName, 'updated', el, binding, vnode, prevVnode);
+            },
+            beforeUnmount: (el, binding, vnode, prevVnode) => {
+                hooks['beforeUnmount'] && hooks['beforeUnmount'](el, binding, vnode, prevVnode);
+                BaseDirective.handleHook(directiveName, 'beforeUnmount', el, binding, vnode, prevVnode);
+            },
+            unmounted: (el, binding, vnode, prevVnode) => {
+                hooks['unmounted'] && hooks['unmounted'](el, binding, vnode, prevVnode);
+                BaseDirective.handleHook(directiveName, 'unmounted', el, binding, vnode, prevVnode);
+            }
+        };
+    },
+    handleHook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
+        let _config = binding.instance.$primevue && binding.instance.$primevue.config;
+        let _directive = _config && _config.pt && _config.pt.directives && _config.pt.directives[directiveName];
+
+        // global pt hook
+        _directive && _directive.hooks && _directive.hooks[hookName] && _directive.hooks[hookName](BaseDirective.directiveElement, el, binding, vnode, prevVnode);
+        // options pt hook
+        binding.value && typeof binding.value === 'object' && binding.value.pt && binding.value.pt.hooks && binding.value.pt.hooks[hookName] && binding.value.pt.hooks[hookName](BaseDirective.directiveElement, el, binding, vnode, prevVnode);
+    },
+    handleCSS: (directiveName, el, binding) => {
+        let _config = binding.instance.$primevue && binding.instance.$primevue.config;
+        let _directive = _config && _config.pt && _config.pt.directives && _config.pt.directives[directiveName];
+        let ptCSSOptions = [];
+
+        // global pt css
+        _directive && _directive.css && ptCSSOptions.push(_directive.css);
+        // options pt css
+        binding.value && binding.value.pt && binding.value.pt.css && ptCSSOptions.push(binding.value.pt.css);
+
+        for (let option of ptCSSOptions) {
+            Object.entries(option).forEach(([key, value]) => {
+                let styledElement;
+
+                if (key === 'root' && directiveName !== 'ripple' && directiveName !== 'badge') styledElement = el;
+                else {
+                    styledElement = DomHandler.findSingle(el, `[data-pc-section="${ObjectUtils.convertToFlatCase(key)}"]`);
+                }
+
+                value.class && DomHandler.addMultipleClasses(styledElement, value.class);
+                value.style && DomHandler.addStyles(styledElement, value.style);
+            });
+        }
+    }
+};
diff --git a/rollup.config.js b/rollup.config.js
index 50218ea8d..8fd85d412 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -62,6 +62,7 @@ let coreDependencies = {
     'primevue/utils': 'primevue.utils',
     'primevue/api': 'primevue.api',
     'primevue/config': 'primevue.config',
+    'primevue/basedirective': 'primevue.basedirective',
     'primevue/ripple': 'primevue.ripple',
     'primevue/portal': 'primevue.portal',
     'primevue/basecomponent': 'primevue.basecomponent',
diff --git a/vite.config.js b/vite.config.js
index 49063aecd..035856409 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,6 +3,7 @@ import path from 'path';
 export default {
     resolve: {
         alias: {
+            'primevue/basedirective': path.resolve(__dirname, './components/lib/basedirective/BaseDirective.js'),
             'primevue/ripple': path.resolve(__dirname, './components/lib/ripple/Ripple.js'),
             'primevue/tooltip': path.resolve(__dirname, './components/lib/tooltip/Tooltip.js'),
             'primevue/focustrap': path.resolve(__dirname, './components/lib/focustrap/FocusTrap.js'),