From de119bb8b0fc742b400b1914efc7317ab92f381b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 10 Jul 2023 00:13:49 +0300
Subject: [PATCH] Docs for unstyled mode

---
 assets/menu/menu.json                         |  60 ++++++++---
 doc/bootstrap/ExampleDoc.vue                  |  77 ++++++++++++++
 doc/bootstrap/SetupDoc.vue                    |   8 ++
 doc/configuration/PTDoc.vue                   |  28 +++++
 doc/configuration/UnstyledDoc.vue             |  26 +++++
 doc/customicons/FontAwesomeDoc.vue            |   3 +-
 doc/customicons/ImageDoc.vue                  |   3 +-
 doc/customicons/MaterialDoc.vue               |   3 +-
 doc/customicons/SVGDoc.vue                    |   3 +-
 doc/installation/NuxtIntegrationDoc.vue       |   2 +-
 .../{StylesDoc.vue => StyledModeDoc.vue}      |   7 +-
 doc/installation/UnstyledModeDoc.vue          |  25 +++++
 doc/passthrough/BasicDoc.vue                  | 100 ++++++++++++++++++
 doc/passthrough/GlobalDoc.vue                 |  35 ++++++
 doc/passthrough/LifecycleDoc.vue              |  71 +++++++++++++
 doc/tailwind/ExampleDoc.vue                   |  77 ++++++++++++++
 doc/tailwind/SetupDoc.vue                     |   9 ++
 doc/unstyled/ArchitectureDoc.vue              |  13 +++
 doc/unstyled/ExampleDoc.vue                   |  68 ++++++++++++
 doc/unstyled/SetupDoc.vue                     |  32 ++++++
 doc/unstyled/ThemeDoc.vue                     |  40 +++++++
 pages/bootstrap/index.vue                     |  43 ++++++++
 pages/configuration/index.vue                 |  16 ++-
 pages/installation/index.vue                  |  25 +++--
 pages/passthrough/index.vue                   |  46 ++++++++
 pages/tailwind/index.vue                      |  43 ++++++++
 pages/team/index.vue                          |   5 -
 pages/unstyled/index.vue                      |  55 ++++++++++
 28 files changed, 883 insertions(+), 40 deletions(-)
 create mode 100644 doc/bootstrap/ExampleDoc.vue
 create mode 100644 doc/bootstrap/SetupDoc.vue
 create mode 100644 doc/configuration/PTDoc.vue
 create mode 100644 doc/configuration/UnstyledDoc.vue
 rename doc/installation/{StylesDoc.vue => StyledModeDoc.vue} (62%)
 create mode 100644 doc/installation/UnstyledModeDoc.vue
 create mode 100644 doc/passthrough/BasicDoc.vue
 create mode 100644 doc/passthrough/GlobalDoc.vue
 create mode 100644 doc/passthrough/LifecycleDoc.vue
 create mode 100644 doc/tailwind/ExampleDoc.vue
 create mode 100644 doc/tailwind/SetupDoc.vue
 create mode 100644 doc/unstyled/ArchitectureDoc.vue
 create mode 100644 doc/unstyled/ExampleDoc.vue
 create mode 100644 doc/unstyled/SetupDoc.vue
 create mode 100644 doc/unstyled/ThemeDoc.vue
 create mode 100644 pages/bootstrap/index.vue
 create mode 100644 pages/passthrough/index.vue
 create mode 100644 pages/tailwind/index.vue
 create mode 100644 pages/unstyled/index.vue

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index ccc75a804..99277ae6c 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -11,10 +11,6 @@
                 {
                     "name": "Configuration",
                     "to": "/configuration"
-                },
-                {
-                    "name": "Accessibility",
-                    "to": "/accessibility"
                 }
             ]
         },
@@ -432,23 +428,50 @@
             "icon": "pi pi-palette",
             "children": [
                 {
-                    "name": "Overview",
-                    "to": "/theming"
+                    "name": "Styled Mode",
+                    "children": [
+                        {
+                            "name": "Overview",
+                            "to": "/theming"
+                        },
+                        {
+                            "name": "Visual Editor",
+                            "href": "https://designer.primevue.org"
+                        },
+                        {
+                            "name": "Colors",
+                            "to": "/colors"
+                        },
+                        {
+                            "name": "SASS API",
+                            "href": "https://www.primefaces.org/designer/api/primevue/3.9.0"
+                        }
+                    ]
                 },
                 {
-                    "name": "Visual Editor",
-                    "href": "https://designer.primevue.org"
-                },
-                {
-                    "name": "Colors",
-                    "to": "/colors"
-                },
-                {
-                    "name": "SASS API",
-                    "href": "https://www.primefaces.org/designer/api/primevue/3.9.0"
+                    "name": "Unstyled Mode",
+                    "children": [
+                        {
+                            "name": "Overview",
+                            "to": "/unstyled"
+                        },
+                        {
+                            "name": "Tailwind",
+                            "to": "/tailwind"
+                        },
+                        {
+                            "name": "Bootstrap",
+                            "to": "/bootstrap"
+                        }
+                    ]
                 }
             ]
         },
+        {
+            "name": "Pass Through",
+            "icon": "pi pi-directions",
+            "to": "/passthrough"
+        },
         {
             "name": "Figma UI Kit",
             "icon": "pi pi-pencil",
@@ -483,6 +506,11 @@
             "icon": "pi pi-table",
             "href": "https://primeflex.org"
         },
+        {
+            "name": "Accessibility",
+            "icon": "pi pi-users",
+            "to": "/accessibility"
+        },
         {
             "name": "Support",
             "icon": "pi pi-question",
diff --git a/doc/bootstrap/ExampleDoc.vue b/doc/bootstrap/ExampleDoc.vue
new file mode 100644
index 000000000..d4fc475e4
--- /dev/null
+++ b/doc/bootstrap/ExampleDoc.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>As an example, <a href="https://getbootstrap.com/docs/4.0/components/modal/">Modal</a> and <a href="https://getbootstrap.com/docs/4.0/components/button/">Button</a> styles of Bootstrap are used to style PrimeVue Button and Dialog.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Button label="Show" icon="pi pi-external-link" @click="visible = true" unstyled />
+
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '960px': '75vw', '641px': '100vw' }" unstyled>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+
+<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Dialog>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/bootstrap/SetupDoc.vue b/doc/bootstrap/SetupDoc.vue
new file mode 100644
index 000000000..5000b3e11
--- /dev/null
+++ b/doc/bootstrap/SetupDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>This section assumes that Boostrap is already available in your application, if not visit the Bootstrap <a href="https://getbootstrap.com/docs/5.3/getting-started/introduction/">documentation</a> for the installation.</p>
+        <p>
+            Bootstrap integration with PrimeVue components is achieved with unstyled mode either using global setting or for a particular component only. Visit the <NuxtLink to="/unstyled">unstyled</NuxtLink> mode documentation for getting started.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/configuration/PTDoc.vue b/doc/configuration/PTDoc.vue
new file mode 100644
index 000000000..03c258ab4
--- /dev/null
+++ b/doc/configuration/PTDoc.vue
@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Defines the shared pass through properties per component type. Visit the <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> documentation for more information.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { 
+    pt: {
+        slider: {
+            handle: { className: 'bg-primary' }
+        }
+    } 
+});`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/configuration/UnstyledDoc.vue b/doc/configuration/UnstyledDoc.vue
new file mode 100644
index 000000000..aae8b65ef
--- /dev/null
+++ b/doc/configuration/UnstyledDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Unstyled mode instructs the components not to add any built-in style classes so that they can be styled using custom css or libraries like Tailwind, Bootstrap or PrimeFlex. Visit
+            <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more information.
+        </p>
+
+        <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { unstyled: true });`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/customicons/FontAwesomeDoc.vue b/doc/customicons/FontAwesomeDoc.vue
index 7b1c73bcc..153e3272d 100644
--- a/doc/customicons/FontAwesomeDoc.vue
+++ b/doc/customicons/FontAwesomeDoc.vue
@@ -10,8 +10,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Dropdown>
+                basic: `<Dropdown>
     <template #dropdownicon>
         <i class="fa-light fa-chevron-down"></i>
     </template>
diff --git a/doc/customicons/ImageDoc.vue b/doc/customicons/ImageDoc.vue
index 1dae2b392..553cce2bf 100644
--- a/doc/customicons/ImageDoc.vue
+++ b/doc/customicons/ImageDoc.vue
@@ -10,8 +10,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Dropdown>
+                basic: `<Dropdown>
     <template #dropdownicon>
         <img alt="dropdown icon" src="/assets/icons/arrow_down.png">
     </template>
diff --git a/doc/customicons/MaterialDoc.vue b/doc/customicons/MaterialDoc.vue
index 92e0cf39b..4da92d536 100644
--- a/doc/customicons/MaterialDoc.vue
+++ b/doc/customicons/MaterialDoc.vue
@@ -10,8 +10,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Dropdown>
+                basic: `<Dropdown>
     <template #dropdownicon>
         <span class="material-icons">arrow_drop_down</span>
     </template>
diff --git a/doc/customicons/SVGDoc.vue b/doc/customicons/SVGDoc.vue
index efcccec09..47c583e15 100644
--- a/doc/customicons/SVGDoc.vue
+++ b/doc/customicons/SVGDoc.vue
@@ -10,8 +10,7 @@ export default {
     data() {
         return {
             code: {
-                basic: `
-<Dropdown>
+                basic: `<Dropdown>
     <template #dropdownicon>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
             <g id="chevron-down">
diff --git a/doc/installation/NuxtIntegrationDoc.vue b/doc/installation/NuxtIntegrationDoc.vue
index 071150379..60438eccc 100644
--- a/doc/installation/NuxtIntegrationDoc.vue
+++ b/doc/installation/NuxtIntegrationDoc.vue
@@ -3,7 +3,7 @@
         <p>PrimeVue can easily be used with Nuxt 3 using a custom plugin.</p>
 
         <h3>nuxt.config.js</h3>
-        <p>Open the nuxt configuration file and add the css dependencies.</p>
+        <p>Open the nuxt configuration file and add the css dependencies. This step is only required when using styled mode and can be ignored in unstyled mode.</p>
 
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 
diff --git a/doc/installation/StylesDoc.vue b/doc/installation/StyledModeDoc.vue
similarity index 62%
rename from doc/installation/StylesDoc.vue
rename to doc/installation/StyledModeDoc.vue
index 882bd91ad..97b1bde65 100644
--- a/doc/installation/StylesDoc.vue
+++ b/doc/installation/StyledModeDoc.vue
@@ -1,8 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Theme, core and icons are the necessary css files of the components, visit the <NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.</p>
+        <p>
+            Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme and core styles are the required css files to be imported, visit the
+            <NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
+        </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>Each PrimeVue theme has its own font family so it is suggested to apply it to your application for a unified look.</p>
+        <p>Each PrimeVue theme has its own font family so it is suggested to apply it to your application as well for a unified look.</p>
         <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     </DocSectionText>
 </template>
diff --git a/doc/installation/UnstyledModeDoc.vue b/doc/installation/UnstyledModeDoc.vue
new file mode 100644
index 000000000..01ef628bf
--- /dev/null
+++ b/doc/installation/UnstyledModeDoc.vue
@@ -0,0 +1,25 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Unstyled mode is disabled by default for all components. Using the PrimeVue plugin during installation, set <i>unstyled</i> as true to enable it globally. Visit the <NuxtLink to="/unstyled">Unstyled mode</NuxtLink> documentation for more
+            information and examples.
+        </p>
+        <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { unstyled: true });`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/passthrough/BasicDoc.vue b/doc/passthrough/BasicDoc.vue
new file mode 100644
index 000000000..68cfcbee8
--- /dev/null
+++ b/doc/passthrough/BasicDoc.vue
@@ -0,0 +1,100 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Each component has a special <i>pt</i> property to define an object with keys corresponding to the available DOM elements. Each value can either be an object or a function that returns an object to define the arbitrary properties to apply
+            to the element such as styling, aria, data-* or custom attributes. Every component documentation has a dedicated section to document the available section names exposed via PT.
+        </p>
+        <p>Most common usage of <i>pt</i> is styling and customization, example below styles a Panel component with PrimeFlex CSS library.</p>
+    </DocSectionText>
+
+    <div class="card">
+        <Panel
+            header="Header"
+            toggleable
+            :pt="{
+                header: (opts) => {
+                    return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
+                },
+                content: { class: 'border-primary text-lg text-primary-700' },
+                title: { class: 'text-xl' },
+                toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+            }"
+        >
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Panel header="Header" toggleable
+    :pt="{
+        header: (opts: PanelPassThroughMethodOptions) => {
+            return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
+        },
+        content: { class: 'border-primary text-lg text-primary-700' },
+        title: { class: 'text-xl' },
+        toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+    }">
+    <p class="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Panel>`,
+                options: `
+<template>
+    <div class="card">
+        <Panel header="Header" toggleable
+            :pt="{
+                header: (opts: PanelPassThroughMethodOptions) => {
+                    return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
+                },
+                content: { class: 'border-primary text-lg text-primary-700' },
+                title: { class: 'text-xl' },
+                toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+            }">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    </div>
+</template>
+
+<script>
+<\/script>`,
+                composition: `
+<template>
+    <div class="card">
+        <Panel header="Header" toggleable
+            :pt="{
+                header: (opts: PanelPassThroughMethodOptions) => {
+                    return { class: opts.state.d_collapsed ? 'bg-primary border-primary' : 'bg-primary-reverse border-primary' };
+                },
+                content: { class: 'border-primary text-lg text-primary-700' },
+                title: { class: 'text-xl' },
+                toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+            }">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/passthrough/GlobalDoc.vue b/doc/passthrough/GlobalDoc.vue
new file mode 100644
index 000000000..04713c77a
--- /dev/null
+++ b/doc/passthrough/GlobalDoc.vue
@@ -0,0 +1,35 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Defines the shared pass through properties per component type. For example, with the configuration below all panel headers have the <i>bg-primary</i> style class and the all autocomplete components have a fixed width. These settings can
+            be overriden by a particular component as components <i>pt</i> property has higher precedence over global <i>pt</i>.
+        </p>
+    </DocSectionText>
+
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { 
+    pt: {
+        panel: {
+            header: { className: 'bg-primary' }
+        },
+        autocomplete: {
+            input: { root: { className: 'w-16rem' } }
+        }
+    } 
+});`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/passthrough/LifecycleDoc.vue b/doc/passthrough/LifecycleDoc.vue
new file mode 100644
index 000000000..e8f11b68c
--- /dev/null
+++ b/doc/passthrough/LifecycleDoc.vue
@@ -0,0 +1,71 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Lifecycle hooks of components are exposed as pass through using the <i>hooks</i> property so that callback functions can be registered. Available callbacks are <i>beforeCreate</i>, <i>created</i>, <i>beforeUpdate</i>,
+            <i>updated</i>,<i>beforeMount</i>, <i>mounted</i>,<i>beforeUnmount</i> and <i>unmounted</i>. Refer to the Vue.js documentation for detailed information about lifecyce hooks.
+        </p>
+    </DocSectionText>
+
+    <DocSectionCode :code="code" hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Panel header="Header" :pt="panelPT"
+    Content
+</Panel>`,
+                options: `
+<template>
+    <Panel header="Header" :pt="panelPT"
+        Content
+    </Panel>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            panelPT: {
+                hooks: {
+                    mounted: () => {
+                        //panel mounted
+                    },
+                    unmounted: () => {
+                        //panel unmounted
+                    }
+                }
+            }
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <Panel header="Header" :pt="panelPT"
+        Content
+    </Panel>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const panelPt = ref({
+    hooks: {
+        mounted: () => {
+            //panel mounted
+        },
+        unmounted: () => {
+            //panel unmounted
+        }
+    }
+);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tailwind/ExampleDoc.vue b/doc/tailwind/ExampleDoc.vue
new file mode 100644
index 000000000..5326017dc
--- /dev/null
+++ b/doc/tailwind/ExampleDoc.vue
@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>As an example, Tailwind is used to style the <i>Button</i> and <i>Dialog</i> components of PrimeVue.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Button label="Show" icon="pi pi-external-link" @click="visible = true" unstyled />
+
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '960px': '75vw', '641px': '100vw' }" unstyled>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+
+<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Dialog>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tailwind/SetupDoc.vue b/doc/tailwind/SetupDoc.vue
new file mode 100644
index 000000000..4f531c4c3
--- /dev/null
+++ b/doc/tailwind/SetupDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            This section assumes that Tailwind is already available in your application, if not visit the Tailwind CSS <a href="https://tailwindcss.com/docs/installation/framework-guides">framework guides</a> for the installation. There is no
+            specific configuration required at Tailwind for the PrimeVue integration.
+        </p>
+        <p>Tailwind can easily be integrated with PrimeVue components in unstyled mode either using global setting or for a particular component only. Visit the <NuxtLink to="/unstyled">unstyled</NuxtLink> mode documentation for getting started.</p>
+    </DocSectionText>
+</template>
diff --git a/doc/unstyled/ArchitectureDoc.vue b/doc/unstyled/ArchitectureDoc.vue
new file mode 100644
index 000000000..cbdf6832b
--- /dev/null
+++ b/doc/unstyled/ArchitectureDoc.vue
@@ -0,0 +1,13 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Unstyled mode consists of two solutions. First part is removal of the component specific style classes from the DOM, when <i>unstyled</i> setting is enabled components do not include any CSS selectors while core functionality is still
+            available. For example, in the default styled mode, the dropdown component adds <i>.p-dropdown</i> style class to the root element and includes CSS to corresponding style. In unstyled setting, this style class is not added to the root
+            element and the CSS is not included in the page.
+        </p>
+        <p>
+            The second part is custom styling as components are displayed as transparent without their styles. <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> feature is the key of since it also supports a global configuration to create
+            themes in unstyled mode. In fact, the upcoming Tailwind theme is basically a custom <i>pt</i> configuration.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/unstyled/ExampleDoc.vue b/doc/unstyled/ExampleDoc.vue
new file mode 100644
index 000000000..d74356126
--- /dev/null
+++ b/doc/unstyled/ExampleDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Here is a sample that provides a style using PrimeFlex CSS library. Before beginning, head over to the pass through section <NuxtLink to="/button">button</NuxtLink> documentation to learn more about the components internals. We'll be
+            using the <i>root</i>, <i>label</i> and <i>icon</i> elements to add a custom style.
+        </p>
+        <div class="card flex justify-content-center">
+            <Button
+                label="Check"
+                icon="pi pi-check"
+                unstyled
+                :pt="{
+                    root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+                    label: { class: 'text-white font-bold text-xl' },
+                    icon: { class: 'text-white text-2xl' }
+                }"
+            />
+        </div>
+        <DocSectionCode :code="code" />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Check" icon="pi pi-check" unstyled
+    :pt="{
+        root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+        label: { class: 'text-white font-bold text-xl' },
+        icon: { class: 'text-white text-2xl' }
+    }"
+/>`,
+                options: `
+<template>
+    <div class="card">
+        <Button label="Check" icon="pi pi-check" unstyled
+            :pt="{
+                root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+                label: { class: 'text-white font-bold text-xl' },
+                icon: { class: 'text-white text-2xl' }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+<\/script>`,
+                composition: `
+<template>
+    <Button label="Check" icon="pi pi-check" unstyled
+        :pt="{
+            root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+            label: { class: 'text-white font-bold text-xl' },
+            icon: { class: 'text-white text-2xl' }
+        }"
+    />
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/unstyled/SetupDoc.vue b/doc/unstyled/SetupDoc.vue
new file mode 100644
index 000000000..572c3424a
--- /dev/null
+++ b/doc/unstyled/SetupDoc.vue
@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Unstyled mode is enabled for the whole suite by setting <i>unstyled</i> as true during PrimeVue installation.</p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the <i>unstyled</i> prop of the component.</p>
+        <div class="card flex justify-content-center">
+            <Button label="Check" icon="pi pi-check" unstyled />
+        </div>
+        <DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { unstyled: true });`
+            },
+            code2: {
+                basic: `
+<Button label="Check" icon="pi pi-check" unstyled></Button>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/unstyled/ThemeDoc.vue b/doc/unstyled/ThemeDoc.vue
new file mode 100644
index 000000000..da9ccdeb6
--- /dev/null
+++ b/doc/unstyled/ThemeDoc.vue
@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            An unstyled theme is basically a global <i>pt</i> configuration so that it can be defined only once from a single location, still a particular component can override a global configuration since the <i>pt</i> props of a component and the
+            global setting is merged with component having higher precedencee.
+        </p>
+    </DocSectionText>
+
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { 
+    pt: {
+        button: {
+            root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+            label: { class: 'text-white font-bold text-xl' },
+            icon: { class: 'text-white text-2xl' }
+        },
+        panel: {
+            header: { class: 'bg-primary border-primary' },
+            content: { class: 'border-primary text-lg text-primary-700' },
+            title: { class: 'bg-primary text-xl' },
+            toggler: { class: 'bg-primary hover:bg-primary-reverse' }
+        }
+    } 
+});`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/bootstrap/index.vue b/pages/bootstrap/index.vue
new file mode 100644
index 000000000..e66b6e6c2
--- /dev/null
+++ b/pages/bootstrap/index.vue
@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <Head>
+            <Title>Bootstrap - PrimeVue</Title>
+            <Meta name="description" content="Styling PrimeVue with Boostrap." />
+        </Head>
+
+        <div class="doc">
+            <div class="doc-main">
+                <div class="doc-intro">
+                    <h1>Bootstrap</h1>
+                    <p>Boostrap is a well-known CSS library to build responsive and mobile first web projects.</p>
+                </div>
+                <DocSections :docs="docs" />
+            </div>
+            <DocSectionNav :docs="docs" />
+        </div>
+    </div>
+</template>
+
+<script>
+import ExampleDoc from '@/doc/bootstrap/ExampleDoc';
+import SetupDoc from '@/doc/bootstrap/SetupDoc';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'setup',
+                    label: 'Setup',
+                    component: SetupDoc
+                },
+                {
+                    id: 'example',
+                    label: 'Example',
+                    component: ExampleDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/pages/configuration/index.vue b/pages/configuration/index.vue
index dd6decd56..4bd80b3cd 100644
--- a/pages/configuration/index.vue
+++ b/pages/configuration/index.vue
@@ -18,11 +18,13 @@
 <script>
 import ImportDoc from '@/doc/configuration/ImportDoc';
 import InputStyleDoc from '@/doc/configuration/InputStyleDoc';
+import PTDoc from '@/doc/configuration/PTDoc.vue';
+import RippleDoc from '@/doc/configuration/RippleDoc';
+import UnstyledDoc from '@/doc/configuration/UnstyledDoc';
+import ZIndexDoc from '@/doc/configuration/ZIndexDoc';
 import LocaleApiDoc from '@/doc/configuration/locale/LocaleApiDoc';
 import RepositoryDoc from '@/doc/configuration/locale/RepositoryDoc';
 import SetLocaleDoc from '@/doc/configuration/locale/SetLocaleDoc';
-import RippleDoc from '@/doc/configuration/RippleDoc';
-import ZIndexDoc from '@/doc/configuration/ZIndexDoc';
 
 export default {
     data() {
@@ -33,6 +35,16 @@ export default {
                     label: 'Import',
                     component: ImportDoc
                 },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                },
+                {
+                    id: 'pt',
+                    label: 'Pass Through',
+                    component: PTDoc
+                },
                 {
                     id: 'ripple',
                     label: 'Ripple',
diff --git a/pages/installation/index.vue b/pages/installation/index.vue
index e9e3d5083..99496f033 100644
--- a/pages/installation/index.vue
+++ b/pages/installation/index.vue
@@ -21,7 +21,8 @@ import ExamplesDoc from '@/doc/installation/ExamplesDoc';
 import NuxtIntegrationDoc from '@/doc/installation/NuxtIntegrationDoc';
 import PluginDoc from '@/doc/installation/PluginDoc';
 import PropCasesDoc from '@/doc/installation/PropCasesDoc';
-import StylesDoc from '@/doc/installation/StylesDoc';
+import StyledModeDoc from '@/doc/installation/StyledModeDoc';
+import UnstyledModeDoc from '@/doc/installation/UnstyledModeDoc';
 import UsageDoc from '@/doc/installation/UsageDoc';
 import CreateVueDoc from '@/doc/installation/videos/CreateVueDoc';
 import NuxtDoc from '@/doc/installation/videos/NuxtDoc';
@@ -40,16 +41,28 @@ export default {
                     label: 'Plugin',
                     component: PluginDoc
                 },
-                {
-                    id: 'styles',
-                    label: 'Styles',
-                    component: StylesDoc
-                },
                 {
                     id: 'usage',
                     label: 'Usage',
                     component: UsageDoc
                 },
+                {
+                    id: 'theming',
+                    label: 'Theming',
+                    description: 'PrimeVue has two theming has modes; styled or unstyled.',
+                    children: [
+                        {
+                            id: 'styled',
+                            label: 'Styled Mode',
+                            component: StyledModeDoc
+                        },
+                        {
+                            id: 'unstyled',
+                            label: 'Unstyled Mode',
+                            component: UnstyledModeDoc
+                        }
+                    ]
+                },
                 {
                     id: 'propcases',
                     label: 'Prop Cases',
diff --git a/pages/passthrough/index.vue b/pages/passthrough/index.vue
new file mode 100644
index 000000000..e97d04fce
--- /dev/null
+++ b/pages/passthrough/index.vue
@@ -0,0 +1,46 @@
+<template>
+    <Head>
+        <Title>PrimeVue - Pass Through</Title>
+        <Meta name="description" content="The Pass Through props is an API to access the internal DOM Structure of the components." />
+    </Head>
+    <div class="doc">
+        <div class="doc-main">
+            <div class="doc-intro">
+                <h1>Pass Through</h1>
+                <p>The Pass Through props is an API to access the internal DOM Structure of the components.</p>
+            </div>
+            <DocSections :docs="docs" />
+        </div>
+        <DocSectionNav :docs="docs" />
+    </div>
+</template>
+
+<script>
+import BasicDoc from '@/doc/passthrough/BasicDoc';
+import GlobalDoc from '@/doc/passthrough/GlobalDoc';
+import LifecycleDoc from '@/doc/passthrough/LifecycleDoc';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'lifecycle',
+                    label: 'Lifecycle',
+                    component: LifecycleDoc
+                },
+                {
+                    id: 'global',
+                    label: 'Global',
+                    component: GlobalDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/pages/tailwind/index.vue b/pages/tailwind/index.vue
new file mode 100644
index 000000000..48b695da1
--- /dev/null
+++ b/pages/tailwind/index.vue
@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <Head>
+            <Title>Tailwind - PrimeVue</Title>
+            <Meta name="description" content="Styling PrimeVue with Tailwind CSS." />
+        </Head>
+
+        <div class="doc">
+            <div class="doc-main">
+                <div class="doc-intro">
+                    <h1>Tailwind CSS</h1>
+                    <p>Tailwind is a popular utility-first CSS library that fits perfectly to the unstyled mode of PrimeVue.</p>
+                </div>
+                <DocSections :docs="docs" />
+            </div>
+            <DocSectionNav :docs="docs" />
+        </div>
+    </div>
+</template>
+
+<script>
+import ExampleDoc from '@/doc/tailwind/ExampleDoc';
+import SetupDoc from '@/doc/tailwind/SetupDoc';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'setup',
+                    label: 'Setup',
+                    component: SetupDoc
+                },
+                {
+                    id: 'example',
+                    label: 'Example',
+                    component: ExampleDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/pages/team/index.vue b/pages/team/index.vue
index a771a9f61..02f1f2cd8 100644
--- a/pages/team/index.vue
+++ b/pages/team/index.vue
@@ -78,11 +78,6 @@
                     <span class="mb-2 text-xl font-bold">Ali Rıza Gücal</span>
                     <span>Front-End Developer</span>
                 </div>
-                <div class="flex flex-column align-items-center flex-auto">
-                    <img src="https://primefaces.org/cdn/primevue/images/team/olgu.jpg" class="border-circle mb-4" alt="Olgu Başak" />
-                    <span class="mb-2 text-xl font-bold">Olgu Başak</span>
-                    <span>Java Web Developer</span>
-                </div>
                 <div class="flex flex-column align-items-center flex-auto">
                     <img src="https://primefaces.org/cdn/primevue/images/team/furkan.jpg" class="border-circle mb-4" alt="Furkan Seziş" />
                     <span class="mb-2 text-xl font-bold">Furkan Seziş</span>
diff --git a/pages/unstyled/index.vue b/pages/unstyled/index.vue
new file mode 100644
index 000000000..c223adea4
--- /dev/null
+++ b/pages/unstyled/index.vue
@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <Head>
+            <Title>Unstyled - PrimeVue</Title>
+            <Meta name="description" content="Styling PrimeVue with your favorite CSS library." />
+        </Head>
+
+        <div class="doc">
+            <div class="doc-main">
+                <div class="doc-intro">
+                    <h1>Unstyled Mode</h1>
+                    <p>Styling PrimeVue with your favorite CSS library.</p>
+                </div>
+                <DocSections :docs="docs" />
+            </div>
+            <DocSectionNav :docs="docs" />
+        </div>
+    </div>
+</template>
+
+<script>
+import ArchitectureDoc from '@/doc/unstyled/ArchitectureDoc';
+import ExampleDoc from '@/doc/unstyled/ExampleDoc';
+import SetupDoc from '@/doc/unstyled/SetupDoc';
+import ThemeDoc from '@/doc/unstyled/ThemeDoc';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'architecture',
+                    label: 'Architecture',
+                    component: ArchitectureDoc
+                },
+                {
+                    id: 'setup',
+                    label: 'Setup',
+                    component: SetupDoc
+                },
+                {
+                    id: 'example',
+                    label: 'Example',
+                    component: ExampleDoc
+                },
+                {
+                    id: 'theme',
+                    label: 'Theme',
+                    component: ThemeDoc
+                }
+            ]
+        };
+    }
+};
+</script>