diff --git a/src/app/examples/si-accordion/si-accordion-tabs.html b/src/app/examples/si-accordion/si-accordion-tabs.html
new file mode 100644
index 000000000..25aa42f53
--- /dev/null
+++ b/src/app/examples/si-accordion/si-accordion-tabs.html
@@ -0,0 +1,58 @@
+<si-tabset>
+  <si-tab heading="Tab 1" [active]="true">Hello</si-tab>
+  <si-tab heading="Tab 2 with table">
+    <div class="bg-base-0 p-5">
+      <h4>On base-0</h4>
+      <si-accordion>
+        <si-collapsible-panel
+          heading="Hey there"
+          (panelToggle)="logEvent('toggle Hey there', $event)"
+        >
+          <div class="p-6"> Here is some content </div>
+        </si-collapsible-panel>
+        <si-collapsible-panel
+          heading="Another one"
+          badge="5"
+          badgeColor="info"
+          contentCssClasses="p-6"
+          (panelToggle)="logEvent('toggle Another one', $event)"
+        >
+          <si-search-bar colorVariant="base-0" placeholder="Search..." />
+          <ngx-datatable
+            class="table-element"
+            columnMode="force"
+            [rows]="[
+              { name: 'John', age: 30 },
+              { name: 'Jane', age: 25 },
+              { name: 'John', age: 30 },
+              { name: 'Jane', age: 25 },
+              { name: 'John', age: 30 },
+              { name: 'Jane', age: 25 },
+              { name: 'John', age: 30 },
+              { name: 'Jane', age: 25 },
+              { name: 'John', age: 30 },
+              { name: 'Jane', age: 25 },
+              { name: 'John', age: 30 },
+              { name: 'Jane', age: 25 }
+            ]"
+            [columns]="[{ prop: 'name' }, { prop: 'age' }]"
+          />
+        </si-collapsible-panel>
+        <si-collapsible-panel
+          heading="Number three"
+          contentCssClasses="p-6"
+          (panelToggle)="logEvent('toggle Number three', $event)"
+        >
+          Nothing to see here
+        </si-collapsible-panel>
+        <si-collapsible-panel
+          contentCssClasses="p-6"
+          (panelToggle)="logEvent('toggle Number four', $event)"
+        >
+          <span si-panel-heading>Heading via content projection</span>
+          Nothing to see here
+        </si-collapsible-panel>
+      </si-accordion>
+    </div>
+  </si-tab>
+</si-tabset>
diff --git a/src/app/examples/si-accordion/si-accordion-tabs.ts b/src/app/examples/si-accordion/si-accordion-tabs.ts
new file mode 100644
index 000000000..bc12b4277
--- /dev/null
+++ b/src/app/examples/si-accordion/si-accordion-tabs.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { SiAccordionComponent, SiCollapsiblePanelComponent } from '@siemens/element-ng/accordion';
+import { SiSearchBarComponent } from '@siemens/element-ng/search-bar';
+import { SiTabComponent, SiTabsetComponent } from '@siemens/element-ng/tabs';
+import { LOG_EVENT } from '@siemens/live-preview';
+import { DatatableComponent } from '@siemens/ngx-datatable';
+
+@Component({
+  selector: 'app-sample',
+  imports: [
+    SiAccordionComponent,
+    SiCollapsiblePanelComponent,
+    DatatableComponent,
+    SiTabComponent,
+    SiTabsetComponent,
+    SiSearchBarComponent
+  ],
+  templateUrl: './si-accordion-tabs.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SampleComponent {
+  logEvent = inject(LOG_EVENT);
+}