diff --git a/layouts/doc/DocApiSection.vue b/layouts/doc/DocApiSection.vue
index 510de3c02..429fdcfda 100644
--- a/layouts/doc/DocApiSection.vue
+++ b/layouts/doc/DocApiSection.vue
@@ -2,7 +2,7 @@
     <div className="doc-main">
         <div className="doc-intro">
             <h1>{{ header }} API</h1>
-            <p>API defines helper props, events and others for the PrimeVue {{ header }} module.</p>
+            <p>{{ description }}</p>
         </div>
         <DocSections :docs="docs" />
     </div>
@@ -31,7 +31,6 @@ export default {
     mounted() {
         this.docs = this.createDocs();
     },
-
     methods: {
         createDocs() {
             const newDocs = [];
@@ -341,6 +340,12 @@ export default {
 
             return !findMainInterface || findMainInterface.values.props.length > 0;
         }
+    },
+
+    computed: {
+        description() {
+            return this.doc && this.doc.length > 0 ? `API defines helper props, events and others for the PrimeVue ${this.header} module.` : `${this.header} is a CSS feature so does not provide a Javascript API`;
+        }
     }
 };
 </script>
diff --git a/layouts/doc/DocComponent.vue b/layouts/doc/DocComponent.vue
index f65cd8e8a..4ea105424 100644
--- a/layouts/doc/DocComponent.vue
+++ b/layouts/doc/DocComponent.vue
@@ -9,7 +9,7 @@
             <li :class="{ 'doc-tabmenu-active': tab === 0 }">
                 <button type="button" @click="tab = 0">COMPONENT</button>
             </li>
-            <li v-if="apiDocs && apiDocs.length > 0" :class="{ 'doc-tabmenu-active': tab === 1 }">
+            <li :class="{ 'doc-tabmenu-active': tab === 1 }">
                 <button type="button" @click="tab = 1">API</button>
             </li>
         </ul>