diff --git a/doc/accordion/theming/index.vue b/doc/accordion/theming/index.vue
index 3b937764c..ee0a9a7e8 100644
--- a/doc/accordion/theming/index.vue
+++ b/doc/accordion/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,43 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes.accordion',
+                            label: 'Accordion CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Accordion')
+                        },
+                        {
+                            id: 'theming.classes.accordioncontent',
+                            label: 'AccordionContent CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('AccordionContent')
+                        },
+                        {
+                            id: 'theming.classes.accordionheader',
+                            label: 'AccordionHeader CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('AccordionHeader')
+                        },
+                        {
+                            id: 'theming.classes.accordionpanel',
+                            label: 'AccordionPanel CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('AccordionPanel')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Accordion')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/autocomplete/theming/index.vue b/doc/autocomplete/theming/index.vue
index ffddf271b..944a15cca 100644
--- a/doc/autocomplete/theming/index.vue
+++ b/doc/autocomplete/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('AutoComplete')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('AutoComplete')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/avatar/theming/index.vue b/doc/avatar/theming/index.vue
index da7cb69b4..b15f84cd1 100644
--- a/doc/avatar/theming/index.vue
+++ b/doc/avatar/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Avatar')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Avatar')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/badge/theming/index.vue b/doc/badge/theming/index.vue
index b5a442fea..70fb3c62b 100644
--- a/doc/badge/theming/index.vue
+++ b/doc/badge/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -34,14 +34,14 @@ export default {
                             description: 'List of class names used in the styled mode.',
                             component: DocApiTable,
                             data: getStyleOptions('OverlayBadge')
-                        },
-                        {
-                            id: 'theming.tokens',
-                            label: 'Design Tokens',
-                            description: 'List of design tokens used in a preset.',
-                            component: DocApiTable,
-                            data: getTokenOptions('Badge')
                         }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Badge')
+                        // }
                     ]
                 },
                 {
diff --git a/doc/blockui/theming/index.vue b/doc/blockui/theming/index.vue
index 5c6605620..fd05331d5 100644
--- a/doc/blockui/theming/index.vue
+++ b/doc/blockui/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('BlockUI')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('BlockUI')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/breadcrumb/theming/index.vue b/doc/breadcrumb/theming/index.vue
index 2205821aa..1d44eec5d 100644
--- a/doc/breadcrumb/theming/index.vue
+++ b/doc/breadcrumb/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Breadcrumb')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Breadcrumb')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/button/theming/index.vue b/doc/button/theming/index.vue
index 9e9973c6f..9f862dd46 100644
--- a/doc/button/theming/index.vue
+++ b/doc/button/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,29 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes.button',
+                            label: 'Button CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Button')
+                        },
+                        {
+                            id: 'theming.classes.buttongroup',
+                            label: 'ButtonGroup CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('ButtonGroup')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Button')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/card/theming/index.vue b/doc/card/theming/index.vue
index 9cf6d6da1..23995ba5a 100644
--- a/doc/card/theming/index.vue
+++ b/doc/card/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Card')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Card')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/carousel/theming/index.vue b/doc/carousel/theming/index.vue
index 98b0e02a1..1d3865318 100644
--- a/doc/carousel/theming/index.vue
+++ b/doc/carousel/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Carousel')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Carousel')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/cascadeselect/theming/index.vue b/doc/cascadeselect/theming/index.vue
index 3e1525ce5..a5a4dff6c 100644
--- a/doc/cascadeselect/theming/index.vue
+++ b/doc/cascadeselect/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('CascadeSelect')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('CascadeSelect')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/chart/theming/index.vue b/doc/chart/theming/index.vue
index e9866e947..8f642b829 100644
--- a/doc/chart/theming/index.vue
+++ b/doc/chart/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,15 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Chart')
+                        }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/checkbox/theming/index.vue b/doc/checkbox/theming/index.vue
index 1dc2d034a..d31690506 100644
--- a/doc/checkbox/theming/index.vue
+++ b/doc/checkbox/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Checkbox')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Checkbox')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/chip/theming/index.vue b/doc/chip/theming/index.vue
index d486366ce..951c7d6ac 100644
--- a/doc/chip/theming/index.vue
+++ b/doc/chip/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Chip')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Chip')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/colorpicker/theming/index.vue b/doc/colorpicker/theming/index.vue
index 31e355382..582a4026d 100644
--- a/doc/colorpicker/theming/index.vue
+++ b/doc/colorpicker/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('ColorPicker')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('ColorPicker')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/confirmdialog/theming/index.vue b/doc/confirmdialog/theming/index.vue
index acc0aa5fb..2a63256f4 100644
--- a/doc/confirmdialog/theming/index.vue
+++ b/doc/confirmdialog/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('ConfirmDialog')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('ConfirmDialog')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/confirmpopup/theming/index.vue b/doc/confirmpopup/theming/index.vue
index 6aa043371..e01994a47 100644
--- a/doc/confirmpopup/theming/index.vue
+++ b/doc/confirmpopup/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('ConfirmPopup')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('ConfirmPopup')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/contextmenu/theming/index.vue b/doc/contextmenu/theming/index.vue
index fb51ab918..3ffcac8f7 100644
--- a/doc/contextmenu/theming/index.vue
+++ b/doc/contextmenu/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('ContextMenu')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('ContextMenu')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/datatable/theming/index.vue b/doc/datatable/theming/index.vue
index 0bfd0f63b..37011fe52 100644
--- a/doc/datatable/theming/index.vue
+++ b/doc/datatable/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('DataTable')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('DataTable')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/dataview/theming/index.vue b/doc/dataview/theming/index.vue
index e827b2dcc..7beeb5ea0 100644
--- a/doc/dataview/theming/index.vue
+++ b/doc/dataview/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('DataView')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('DataView')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/datepicker/theming/index.vue b/doc/datepicker/theming/index.vue
index 5011792a0..e290600ed 100644
--- a/doc/datepicker/theming/index.vue
+++ b/doc/datepicker/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('DatePicker')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('DatePicker')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/dialog/theming/index.vue b/doc/dialog/theming/index.vue
index d47acae5a..da5d60b8a 100644
--- a/doc/dialog/theming/index.vue
+++ b/doc/dialog/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Dialog')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Dialog')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/divider/theming/index.vue b/doc/divider/theming/index.vue
index b6b3e0a8a..11dbde9a8 100644
--- a/doc/divider/theming/index.vue
+++ b/doc/divider/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Divider')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Divider')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/dock/theming/index.vue b/doc/dock/theming/index.vue
index 39909995a..dbe9031e3 100644
--- a/doc/dock/theming/index.vue
+++ b/doc/dock/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Dock')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Dock')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/drawer/theming/index.vue b/doc/drawer/theming/index.vue
index 423fcd69a..67270f7c4 100644
--- a/doc/drawer/theming/index.vue
+++ b/doc/drawer/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Drawer')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Drawer')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/dynamicdialog/theming/StyledDoc.vue b/doc/dynamicdialog/theming/StyledDoc.vue
index 10784aa56..e1d8a1c89 100644
--- a/doc/dynamicdialog/theming/StyledDoc.vue
+++ b/doc/dynamicdialog/theming/StyledDoc.vue
@@ -1,5 +1,5 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>List of class names can be found in <PrimeVueNuxtLink to="/dialog/#theming.styled">Dialog</PrimeVueNuxtLink> theming documentation.</p>
+        <p>List of class names and desing tokens can be found in <PrimeVueNuxtLink to="/dialog/#theming.styled">Dialog</PrimeVueNuxtLink> theming documentation.</p>
     </DocSectionText>
 </template>
diff --git a/doc/editor/theming/index.vue b/doc/editor/theming/index.vue
index c969a7d63..0f2433dcf 100644
--- a/doc/editor/theming/index.vue
+++ b/doc/editor/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Editor')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Editor')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/fieldset/theming/index.vue b/doc/fieldset/theming/index.vue
index 2249a1b78..fd1f7372f 100644
--- a/doc/fieldset/theming/index.vue
+++ b/doc/fieldset/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Fieldset')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Fieldset')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/fileupload/theming/index.vue b/doc/fileupload/theming/index.vue
index 3464fcfa6..0d9fe6266 100644
--- a/doc/fileupload/theming/index.vue
+++ b/doc/fileupload/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('FileUpload')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('FileUpload')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/floatlabel/theming/index.vue b/doc/floatlabel/theming/index.vue
index de213ca6c..23cc5356d 100644
--- a/doc/floatlabel/theming/index.vue
+++ b/doc/floatlabel/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('FloatLabel')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('FloatLabel')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/galleria/theming/index.vue b/doc/galleria/theming/index.vue
index 4502e8566..42e0fe2c0 100644
--- a/doc/galleria/theming/index.vue
+++ b/doc/galleria/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Galleria')
+                        }
+                        //     {
+                        //         id: 'theming.tokens',
+                        //         label: 'Design Tokens',
+                        //         description: 'List of design tokens used in a preset.',
+                        //         component: DocApiTable,
+                        //         data: getTokenOptions('Galleria')
+                        //     }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/iconfield/theming/index.vue b/doc/iconfield/theming/index.vue
index 8bdb1e256..6c1ad34f1 100644
--- a/doc/iconfield/theming/index.vue
+++ b/doc/iconfield/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,29 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes.iconfield',
+                            label: 'IconField CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('IconField')
+                        },
+                        {
+                            id: 'theming.classes.inputicon',
+                            label: 'InputIcon CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('InputIcon')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('IconField')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/image/theming/index.vue b/doc/image/theming/index.vue
index 797ab704f..19261f52a 100644
--- a/doc/image/theming/index.vue
+++ b/doc/image/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Image')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Image')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/inlinemessage/theming/index.vue b/doc/inlinemessage/theming/index.vue
index cb1959cf3..d8bf4d4bb 100644
--- a/doc/inlinemessage/theming/index.vue
+++ b/doc/inlinemessage/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('InlineMessage')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('InlineMessage')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/inplace/theming/index.vue b/doc/inplace/theming/index.vue
index 848760346..09265316b 100644
--- a/doc/inplace/theming/index.vue
+++ b/doc/inplace/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Inplace')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Inplace')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/inputgroup/theming/index.vue b/doc/inputgroup/theming/index.vue
index 7ef20fdd8..6f5231945 100644
--- a/doc/inputgroup/theming/index.vue
+++ b/doc/inputgroup/theming/index.vue
@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import InputGroupAddonStyleDoc from './InputGroupAddonStyleDoc.vue';
-import InputGroupStyleDoc from './InputGroupStyleDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -22,15 +22,26 @@ export default {
                     label: 'Styled',
                     children: [
                         {
-                            id: 'theming.inputgroup',
-                            label: 'InputGroup',
-                            component: InputGroupStyleDoc
+                            id: 'theming.classes.inputgroup',
+                            label: 'InputGroup CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('InputGroup')
                         },
                         {
-                            id: 'theming.inputgroupaddon',
-                            label: 'InputGroupAddon',
-                            component: InputGroupAddonStyleDoc
+                            id: 'theming.classes.inputgroupaddon',
+                            label: 'InputGroupAddon CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('InputGroupAddon')
                         }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('InputGroup')
+                        // }
                     ]
                 },
                 {
diff --git a/doc/inputmask/theming/index.vue b/doc/inputmask/theming/index.vue
index 4753344ec..73be189c8 100644
--- a/doc/inputmask/theming/index.vue
+++ b/doc/inputmask/theming/index.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -19,7 +21,15 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('InputMask')
+                        }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/inputnumber/theming/index.vue b/doc/inputnumber/theming/index.vue
index 74384ff2a..967afb402 100644
--- a/doc/inputnumber/theming/index.vue
+++ b/doc/inputnumber/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('InputNumber')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('InputNumber')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/inputotp/theming/index.vue b/doc/inputotp/theming/index.vue
index 64647f842..e00a93985 100644
--- a/doc/inputotp/theming/index.vue
+++ b/doc/inputotp/theming/index.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import StyledDoc from './StyledDoc.vue';
 import TailwindDoc from './TailwindDoc.vue';
 
@@ -19,7 +21,15 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('InputOtp')
+                        }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/inputtext/theming/index.vue b/doc/inputtext/theming/index.vue
index bb17a3486..445ccb3f2 100644
--- a/doc/inputtext/theming/index.vue
+++ b/doc/inputtext/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -27,14 +27,14 @@ export default {
                             description: 'List of class names used in the styled mode.',
                             component: DocApiTable,
                             data: getStyleOptions('InputText')
-                        },
-                        {
-                            id: 'theming.tokens',
-                            label: 'Design Tokens',
-                            description: 'List of design tokens used in a preset.',
-                            component: DocApiTable,
-                            data: getTokenOptions(this.$appState.preset, 'InputText')
                         }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('InputText')
+                        // }
                     ]
                 },
                 {
diff --git a/doc/knob/theming/index.vue b/doc/knob/theming/index.vue
index 2e73a2472..ddd26681a 100644
--- a/doc/knob/theming/index.vue
+++ b/doc/knob/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Knob')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Knob')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/listbox/theming/index.vue b/doc/listbox/theming/index.vue
index a39016aab..2549f05eb 100644
--- a/doc/listbox/theming/index.vue
+++ b/doc/listbox/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Listbox')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Listbox')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/megamenu/theming/index.vue b/doc/megamenu/theming/index.vue
index a0880a104..d5329fd51 100644
--- a/doc/megamenu/theming/index.vue
+++ b/doc/megamenu/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('MegaMenu')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('MegaMenu')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/menu/theming/index.vue b/doc/menu/theming/index.vue
index dd4cc98cd..1c328dead 100644
--- a/doc/menu/theming/index.vue
+++ b/doc/menu/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Menu')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Menu')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/menubar/theming/index.vue b/doc/menubar/theming/index.vue
index cdede8e91..03b0629e0 100644
--- a/doc/menubar/theming/index.vue
+++ b/doc/menubar/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Menubar')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Menubar')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/message/theming/index.vue b/doc/message/theming/index.vue
index 090b5f31d..52f376879 100644
--- a/doc/message/theming/index.vue
+++ b/doc/message/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Message')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Message')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/metergroup/theming/index.vue b/doc/metergroup/theming/index.vue
index 71e5aca44..c10ca6924 100644
--- a/doc/metergroup/theming/index.vue
+++ b/doc/metergroup/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('MeterGroup')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('MeterGroup')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/multiselect/theming/index.vue b/doc/multiselect/theming/index.vue
index 1550822f9..3fe32ccbb 100644
--- a/doc/multiselect/theming/index.vue
+++ b/doc/multiselect/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('MultiSelect')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('MultiSelect')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/orderlist/theming/index.vue b/doc/orderlist/theming/index.vue
index 44dcf5c4d..ac967e448 100644
--- a/doc/orderlist/theming/index.vue
+++ b/doc/orderlist/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('OrderList')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('OrderList')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/organizationchart/theming/index.vue b/doc/organizationchart/theming/index.vue
index 4611e4599..4d420e8f8 100644
--- a/doc/organizationchart/theming/index.vue
+++ b/doc/organizationchart/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('OrganizationChart')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('OrganizationChart')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/paginator/theming/index.vue b/doc/paginator/theming/index.vue
index 6e054e7e0..b84bd4ac4 100644
--- a/doc/paginator/theming/index.vue
+++ b/doc/paginator/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Paginator')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Paginator')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/panel/theming/index.vue b/doc/panel/theming/index.vue
index c21893379..ea87a1925 100644
--- a/doc/panel/theming/index.vue
+++ b/doc/panel/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Panel')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Panel')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/panelmenu/theming/index.vue b/doc/panelmenu/theming/index.vue
index 7f07bcc0e..664cd70bf 100644
--- a/doc/panelmenu/theming/index.vue
+++ b/doc/panelmenu/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('PanelMenu')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('PanelMenu')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/password/theming/index.vue b/doc/password/theming/index.vue
index 50eb32735..041144d45 100644
--- a/doc/password/theming/index.vue
+++ b/doc/password/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Password')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Password')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/picklist/theming/index.vue b/doc/picklist/theming/index.vue
index 47cc27250..6487c903f 100644
--- a/doc/picklist/theming/index.vue
+++ b/doc/picklist/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('PickList')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('PickList')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/popover/theming/index.vue b/doc/popover/theming/index.vue
index 169457cee..817cd6e7b 100644
--- a/doc/popover/theming/index.vue
+++ b/doc/popover/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Popover')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Popover')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/progressbar/theming/index.vue b/doc/progressbar/theming/index.vue
index bf9ffc90f..56fe40c4f 100644
--- a/doc/progressbar/theming/index.vue
+++ b/doc/progressbar/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('ProgressBar')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('ProgressBar')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/progressspinner/theming/index.vue b/doc/progressspinner/theming/index.vue
index 489093346..a82360c3c 100644
--- a/doc/progressspinner/theming/index.vue
+++ b/doc/progressspinner/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('ProgressSpinner')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('ProgressSpinner')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/radiobutton/theming/index.vue b/doc/radiobutton/theming/index.vue
index 7acc2f36d..dcd806605 100644
--- a/doc/radiobutton/theming/index.vue
+++ b/doc/radiobutton/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('RadioButton')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('RadioButton')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/rating/theming/index.vue b/doc/rating/theming/index.vue
index 7fa69e851..d21e7575e 100644
--- a/doc/rating/theming/index.vue
+++ b/doc/rating/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Rating')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Rating')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/ripple/theming/index.vue b/doc/ripple/theming/index.vue
index c48a9c731..cfd9ac827 100644
--- a/doc/ripple/theming/index.vue
+++ b/doc/ripple/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Ripple')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Ripple')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/scrollpanel/theming/index.vue b/doc/scrollpanel/theming/index.vue
index 66820e5d2..fa88cb0ed 100644
--- a/doc/scrollpanel/theming/index.vue
+++ b/doc/scrollpanel/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('ScrollPanel')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('ScrollPanel')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/scrolltop/theming/index.vue b/doc/scrolltop/theming/index.vue
index ea4df0935..d77a7d037 100644
--- a/doc/scrolltop/theming/index.vue
+++ b/doc/scrolltop/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,15 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('ScrollTop')
+                        }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/select/theming/index.vue b/doc/select/theming/index.vue
index 67b14ad45..32a393706 100644
--- a/doc/select/theming/index.vue
+++ b/doc/select/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Select')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Select')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/selectbutton/theming/index.vue b/doc/selectbutton/theming/index.vue
index b6dd1dc94..b7f4ec846 100644
--- a/doc/selectbutton/theming/index.vue
+++ b/doc/selectbutton/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('SelectButton')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('SelectButton')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/skeleton/theming/index.vue b/doc/skeleton/theming/index.vue
index 3d8862d15..bd374d845 100644
--- a/doc/skeleton/theming/index.vue
+++ b/doc/skeleton/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Skeleton')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Skeleton')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/slider/theming/index.vue b/doc/slider/theming/index.vue
index 20f267857..8a5265dca 100644
--- a/doc/slider/theming/index.vue
+++ b/doc/slider/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Slider')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Slider')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/speeddial/theming/index.vue b/doc/speeddial/theming/index.vue
index 27ed22cc0..cb46f67fc 100644
--- a/doc/speeddial/theming/index.vue
+++ b/doc/speeddial/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('SpeedDial')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('SpeedDial')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/splitbutton/theming/index.vue b/doc/splitbutton/theming/index.vue
index ba35dee8d..a5626e6ca 100644
--- a/doc/splitbutton/theming/index.vue
+++ b/doc/splitbutton/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('SplitButton')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('SplitButton')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/splitter/theming/index.vue b/doc/splitter/theming/index.vue
index 3fe85d6ed..f572ce744 100644
--- a/doc/splitter/theming/index.vue
+++ b/doc/splitter/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,29 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes.splitter',
+                            label: 'Splitter CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Splitter')
+                        },
+                        {
+                            id: 'theming.classes.splitterpanel',
+                            label: 'SplitterPanel CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('SplitterPanel')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Splitter')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/stepper/theming/index.vue b/doc/stepper/theming/index.vue
index 4a05b4561..b57ec0f5e 100644
--- a/doc/stepper/theming/index.vue
+++ b/doc/stepper/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Stepper')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Stepper')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/steps/theming/index.vue b/doc/steps/theming/index.vue
index 130092b8e..8d7120601 100644
--- a/doc/steps/theming/index.vue
+++ b/doc/steps/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Steps')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Steps')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/tabmenu/theming/index.vue b/doc/tabmenu/theming/index.vue
index bb85573ec..db79a335a 100644
--- a/doc/tabmenu/theming/index.vue
+++ b/doc/tabmenu/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('TabMenu')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('TabMenu')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/tabs/theming/index.vue b/doc/tabs/theming/index.vue
index 997547116..1a4dd44e0 100644
--- a/doc/tabs/theming/index.vue
+++ b/doc/tabs/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,50 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes.tabs',
+                            label: 'Tabs CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Tabs')
+                        },
+                        {
+                            id: 'theming.classes.tablist',
+                            label: 'TabList CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('TabList')
+                        },
+                        {
+                            id: 'theming.classes.tab',
+                            label: 'Tab CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Tab')
+                        },
+                        {
+                            id: 'theming.classes.tabpanels',
+                            label: 'TabPanels CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('TabPanels')
+                        },
+                        {
+                            id: 'theming.classes.tabpanel',
+                            label: 'TabPanel CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('TabPanel')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Tabs')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/tag/theming/index.vue b/doc/tag/theming/index.vue
index 025723475..ae6ef7083 100644
--- a/doc/tag/theming/index.vue
+++ b/doc/tag/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Tag')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Tag')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/terminal/theming/index.vue b/doc/terminal/theming/index.vue
index bb6130eaa..4e5b1e06b 100644
--- a/doc/terminal/theming/index.vue
+++ b/doc/terminal/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Terminal')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Terminal')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/textarea/theming/index.vue b/doc/textarea/theming/index.vue
index 1b3974523..084065018 100644
--- a/doc/textarea/theming/index.vue
+++ b/doc/textarea/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Textarea')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Textarea')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/tieredmenu/theming/index.vue b/doc/tieredmenu/theming/index.vue
index 2fd4763f4..74eb08161 100644
--- a/doc/tieredmenu/theming/index.vue
+++ b/doc/tieredmenu/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('TieredMenu')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('TieredMenu')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/timeline/theming/index.vue b/doc/timeline/theming/index.vue
index f7262bb14..47343c40b 100644
--- a/doc/timeline/theming/index.vue
+++ b/doc/timeline/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Timeline')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Timeline')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/toast/theming/index.vue b/doc/toast/theming/index.vue
index d5c5825fd..fff0f42b0 100644
--- a/doc/toast/theming/index.vue
+++ b/doc/toast/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Toast')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Toast')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/togglebutton/theming/index.vue b/doc/togglebutton/theming/index.vue
index f8f502e3c..aa7900e4a 100644
--- a/doc/togglebutton/theming/index.vue
+++ b/doc/togglebutton/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('ToggleButton')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('ToggleButton')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/toggleswitch/theming/index.vue b/doc/toggleswitch/theming/index.vue
index 962ab7b32..e6dc80717 100644
--- a/doc/toggleswitch/theming/index.vue
+++ b/doc/toggleswitch/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('ToggleSwitch')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('ToggleSwitch')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/toolbar/theming/index.vue b/doc/toolbar/theming/index.vue
index 7fb32fb27..f23150497 100644
--- a/doc/toolbar/theming/index.vue
+++ b/doc/toolbar/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Toolbar')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Toolbar')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/tooltip/theming/index.vue b/doc/tooltip/theming/index.vue
index 862307930..15dbd3eee 100644
--- a/doc/tooltip/theming/index.vue
+++ b/doc/tooltip/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Tooltip')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Tooltip')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/tree/theming/index.vue b/doc/tree/theming/index.vue
index e4cd33108..90d35e712 100644
--- a/doc/tree/theming/index.vue
+++ b/doc/tree/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Tree')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('Tree')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/treeselect/theming/index.vue b/doc/treeselect/theming/index.vue
index 24b80cc22..65789dc4d 100644
--- a/doc/treeselect/theming/index.vue
+++ b/doc/treeselect/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('TreeSelect')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('TreeSelect')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/treetable/theming/index.vue b/doc/treetable/theming/index.vue
index dc82ee766..5e4c9f319 100644
--- a/doc/treetable/theming/index.vue
+++ b/doc/treetable/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,22 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('TreeTable')
+                        }
+                        // {
+                        //     id: 'theming.tokens',
+                        //     label: 'Design Tokens',
+                        //     description: 'List of design tokens used in a preset.',
+                        //     component: DocApiTable,
+                        //     data: getTokenOptions('TreeTable')
+                        // }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/doc/virtualscroller/theming/index.vue b/doc/virtualscroller/theming/index.vue
index 5ec8b1b68..ce81ad6c2 100644
--- a/doc/virtualscroller/theming/index.vue
+++ b/doc/virtualscroller/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions } from '@/components/doc/helpers';
 
 export default {
     data() {
@@ -18,7 +19,15 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes',
+                            label: 'CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('VirtualScroller')
+                        }
+                    ]
                 }
             ]
         };