diff --git a/src/lib/components/dropTabs.svelte b/src/lib/components/dropTabs.svelte
new file mode 100644
index 0000000000..d2a425ec52
--- /dev/null
+++ b/src/lib/components/dropTabs.svelte
@@ -0,0 +1,3 @@
+<ul class="drop-tabs">
+    <slot />
+</ul>
diff --git a/src/lib/components/dropTabsItem.svelte b/src/lib/components/dropTabsItem.svelte
new file mode 100644
index 0000000000..b7ebac26fb
--- /dev/null
+++ b/src/lib/components/dropTabsItem.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    export let disabled = false;
+</script>
+
+<li class="drop-tabs-item">
+    <button class="drop-tabs-button" {disabled} on:click>
+        <span class="text"><slot /></span>
+    </button>
+</li>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 8e43827c68..688e5e3241 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -13,6 +13,8 @@ export { default as DropList } from './dropList.svelte';
 export { default as DropListItem } from './dropListItem.svelte';
 export { default as DropListLink } from './dropListLink.svelte';
 export { default as Collapsible } from './collapsible.svelte';
+export { default as DropTabs } from './dropTabs.svelte';
+export { default as DropTabsItem } from './dropTabsItem.svelte';
 export { default as Tooltip } from './tooltip.svelte';
 export { default as Avatar } from './avatar.svelte';
 export { default as SwitchBox } from './switchBox.svelte';
diff --git a/tests/unit/components/dropTabsItem.test.ts b/tests/unit/components/dropTabsItem.test.ts
new file mode 100644
index 0000000000..680343abde
--- /dev/null
+++ b/tests/unit/components/dropTabsItem.test.ts
@@ -0,0 +1,26 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/svelte';
+
+import { DropTabsItem } from '../../../src/lib/components';
+
+test('shows button', () => {
+    const { getByRole } = render(DropTabsItem);
+
+    expect(getByRole('button')).toBeInTheDocument();
+});
+
+test('shows button - disabled', () => {
+    const { getByRole } = render(DropTabsItem, { disabled: true });
+
+    expect(getByRole('button')).toBeDisabled();
+});
+
+test('shows button - on:click', async () => {
+    const { getByRole, component } = render(DropTabsItem);
+    const button = getByRole('button');
+    const callback = jest.fn();
+    component.$on('click', callback);
+
+    await fireEvent.click(button);
+    expect(callback).toHaveBeenCalled();
+});