diff --git a/.changeset/dry-coats-return.md b/.changeset/dry-coats-return.md
new file mode 100644
index 0000000000..bfd6f2f339
--- /dev/null
+++ b/.changeset/dry-coats-return.md
@@ -0,0 +1,8 @@
+---
+"@skeletonlabs/skeleton-common": minor
+"@skeletonlabs/skeleton-svelte": minor
+"@skeletonlabs/skeleton-react": minor
+---
+
+feat: tabs
+  
\ No newline at end of file
diff --git a/packages/skeleton-common/src/classes/tabs.ts b/packages/skeleton-common/src/classes/tabs.ts
new file mode 100644
index 0000000000..105198cdbe
--- /dev/null
+++ b/packages/skeleton-common/src/classes/tabs.ts
@@ -0,0 +1,10 @@
+import { defineSkeletonClasses } from '../internal/define-skeleton-classes' with { type: 'macro' };
+
+export const classesTabs = defineSkeletonClasses({
+	root: 'w-full flex data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row',
+	list: 'relative data-[orientation=horizontal]:mb-4 data-[orientation=horizontal]:pb-2 data-[orientation=vertical]:pe-2 data-[orientation=vertical]:me-4 flex data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col gap-2 data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-e border-surface-200-800',
+	trigger: 'btn hover:preset-tonal-primary data-disabled:opacity-50 data-disabled:pointer-events-none',
+	indicator:
+		'bg-surface-950-50 data-[orientation=horizontal]:w-(--width) data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:bottom-0 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:h-(--height) data-[orientation=vertical]:end-0',
+	content: ''
+});
diff --git a/packages/skeleton-common/src/index.ts b/packages/skeleton-common/src/index.ts
index 8f46aae5ab..a317a226d5 100644
--- a/packages/skeleton-common/src/index.ts
+++ b/packages/skeleton-common/src/index.ts
@@ -2,3 +2,4 @@ export * from './themes.js';
 export * from './classes/accordion.js';
 export * from './classes/avatar.js';
 export * from './classes/rating-group.js';
+export * from './classes/tabs.js';
diff --git a/packages/skeleton-react/src/components/tabs/anatomy/tabs-content.tsx b/packages/skeleton-react/src/components/tabs/anatomy/tabs-content.tsx
new file mode 100644
index 0000000000..c809de379e
--- /dev/null
+++ b/packages/skeleton-react/src/components/tabs/anatomy/tabs-content.tsx
@@ -0,0 +1,22 @@
+import { classesTabs } from '@skeletonlabs/skeleton-common';
+import { splitContentProps, type ContentProps } from '@zag-js/tabs';
+import { mergeProps } from '@zag-js/react';
+import { useContext, type ComponentProps } from 'react';
+import { TabsRootContext } from '../modules/tabs-root-context.js';
+import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+export interface TabsContentProps extends PropsWithElement, ContentProps, ComponentProps<'div'> {}
+
+export default function (props: TabsContentProps) {
+	const rootContext = useContext(TabsRootContext);
+	const [itemProps, componentProps] = splitContentProps(props);
+	const { element, children, ...restAttributes } = componentProps;
+	const attributes = mergeProps(
+		rootContext.api.getContentProps(itemProps),
+		{
+			className: classesTabs.content
+		},
+		restAttributes
+	);
+	return element ? element({ attributes }) : <div {...attributes}>{children}</div>;
+}
diff --git a/packages/skeleton-react/src/components/tabs/anatomy/tabs-indicator.tsx b/packages/skeleton-react/src/components/tabs/anatomy/tabs-indicator.tsx
new file mode 100644
index 0000000000..04f6f9b510
--- /dev/null
+++ b/packages/skeleton-react/src/components/tabs/anatomy/tabs-indicator.tsx
@@ -0,0 +1,20 @@
+import { classesTabs } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { useContext, type ComponentProps } from 'react';
+import { TabsRootContext } from '../modules/tabs-root-context.js';
+import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+export interface TabsIndicatorProps extends PropsWithElement, Omit<ComponentProps<'div'>, 'children'> {}
+
+export default function (props: TabsIndicatorProps) {
+	const rootContext = useContext(TabsRootContext);
+	const { element, ...restAttributes } = props;
+	const attributes = mergeProps(
+		rootContext.api.getIndicatorProps(),
+		{
+			className: classesTabs.indicator
+		},
+		restAttributes
+	);
+	return element ? element({ attributes }) : <div {...attributes}></div>;
+}
diff --git a/packages/skeleton-react/src/components/tabs/anatomy/tabs-list.tsx b/packages/skeleton-react/src/components/tabs/anatomy/tabs-list.tsx
new file mode 100644
index 0000000000..444aa6509f
--- /dev/null
+++ b/packages/skeleton-react/src/components/tabs/anatomy/tabs-list.tsx
@@ -0,0 +1,20 @@
+import { classesTabs } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { useContext, type ComponentProps } from 'react';
+import { TabsRootContext } from '../modules/tabs-root-context.js';
+import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+export interface TabsListProps extends PropsWithElement, Omit<ComponentProps<'div'>, 'id' | 'defaultValue' | 'dir'> {}
+
+export default function (props: TabsListProps) {
+	const rootContext = useContext(TabsRootContext);
+	const { element, children, ...restAttributes } = props;
+	const attributes = mergeProps(
+		rootContext.api.getListProps(),
+		{
+			className: classesTabs.list
+		},
+		restAttributes
+	);
+	return element ? element({ attributes }) : <div {...attributes}>{children}</div>;
+}
diff --git a/packages/skeleton-react/src/components/tabs/anatomy/tabs-root-context.tsx b/packages/skeleton-react/src/components/tabs/anatomy/tabs-root-context.tsx
new file mode 100644
index 0000000000..4ddb89b5bc
--- /dev/null
+++ b/packages/skeleton-react/src/components/tabs/anatomy/tabs-root-context.tsx
@@ -0,0 +1,11 @@
+import { useContext, type ReactNode } from 'react';
+import { type TabsRootContextType, TabsRootContext } from '../modules/tabs-root-context.js';
+
+export interface TabsRootContextProps {
+	children: (context: TabsRootContextType) => ReactNode;
+}
+
+export default function (props: TabsRootContextProps) {
+	const rootContext = useContext(TabsRootContext);
+	return props.children(rootContext);
+}
diff --git a/packages/skeleton-react/src/components/tabs/anatomy/tabs-root.tsx b/packages/skeleton-react/src/components/tabs/anatomy/tabs-root.tsx
new file mode 100644
index 0000000000..0ac4bb1af0
--- /dev/null
+++ b/packages/skeleton-react/src/components/tabs/anatomy/tabs-root.tsx
@@ -0,0 +1,30 @@
+import { splitProps, machine, connect, type Props } from '@zag-js/tabs';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/react';
+import { useId, type ComponentProps } from 'react';
+import { TabsRootContext } from '../modules/tabs-root-context.js';
+import type { PropsWithElement } from '@/internal/props-with-element';
+import { classesTabs } from '@skeletonlabs/skeleton-common';
+
+export interface TabsRootProps extends PropsWithElement, Omit<Props, 'id'>, Omit<ComponentProps<'div'>, 'id' | 'defaultValue' | 'dir'> {}
+
+export default function (props: TabsRootProps) {
+	const [machineProps, componentProps] = splitProps(props);
+	const { element, children, ...restAttributes } = componentProps;
+	const service = useMachine(machine, {
+		id: useId(),
+		...machineProps
+	});
+	const api = connect(service, normalizeProps);
+	const attributes = mergeProps(
+		api.getRootProps(),
+		{
+			className: classesTabs.root
+		},
+		restAttributes
+	);
+	return (
+		<TabsRootContext.Provider value={{ api }}>
+			{element ? element({ attributes }) : <div {...attributes}>{children}</div>}
+		</TabsRootContext.Provider>
+	);
+}
diff --git a/packages/skeleton-react/src/components/tabs/anatomy/tabs-trigger.tsx b/packages/skeleton-react/src/components/tabs/anatomy/tabs-trigger.tsx
new file mode 100644
index 0000000000..547f653ad4
--- /dev/null
+++ b/packages/skeleton-react/src/components/tabs/anatomy/tabs-trigger.tsx
@@ -0,0 +1,22 @@
+import { classesTabs } from '@skeletonlabs/skeleton-common';
+import { splitTriggerProps, type TriggerProps } from '@zag-js/tabs';
+import { mergeProps } from '@zag-js/react';
+import { useContext, type ComponentProps } from 'react';
+import { TabsRootContext } from '../modules/tabs-root-context.js';
+import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+export interface TabsTriggerProps extends PropsWithElement, TriggerProps, Omit<ComponentProps<'button'>, 'value'> {}
+
+export default function (props: TabsTriggerProps) {
+	const rootContext = useContext(TabsRootContext);
+	const [itemProps, componentProps] = splitTriggerProps(props);
+	const { element, children, ...restAttributes } = componentProps;
+	const attributes = mergeProps(
+		rootContext.api.getTriggerProps(itemProps),
+		{
+			className: classesTabs.trigger
+		},
+		restAttributes
+	);
+	return element ? element({ attributes }) : <button {...attributes}>{children}</button>;
+}
diff --git a/packages/skeleton-react/src/components/tabs/index.ts b/packages/skeleton-react/src/components/tabs/index.ts
new file mode 100644
index 0000000000..ebe167f068
--- /dev/null
+++ b/packages/skeleton-react/src/components/tabs/index.ts
@@ -0,0 +1,8 @@
+export { Tabs } from './modules/tabs-anatomy.js';
+export type { TabsRootProps } from './anatomy/tabs-root.js';
+export type { TabsRootContextProps } from './anatomy/tabs-root-context.js';
+export type { TabsListProps } from './anatomy/tabs-list.js';
+export type { TabsTriggerProps } from './anatomy/tabs-trigger.js';
+export type { TabsIndicatorProps } from './anatomy/tabs-indicator.js';
+export type { TabsContentProps } from './anatomy/tabs-content.js';
+export type { TabsRootContextType as TabsRootContext } from './modules/tabs-root-context.js';
diff --git a/packages/skeleton-react/src/components/tabs/modules/tabs-anatomy.ts b/packages/skeleton-react/src/components/tabs/modules/tabs-anatomy.ts
new file mode 100644
index 0000000000..d072bd3e35
--- /dev/null
+++ b/packages/skeleton-react/src/components/tabs/modules/tabs-anatomy.ts
@@ -0,0 +1,14 @@
+import TabsRoot from '../anatomy/tabs-root.jsx';
+import TabsRootContext from '../anatomy/tabs-root-context.jsx';
+import TabsList from '../anatomy/tabs-list.jsx';
+import TabsTrigger from '../anatomy/tabs-trigger.jsx';
+import tabsIndicator from '../anatomy/tabs-indicator.js';
+import TabsContent from '../anatomy/tabs-content.jsx';
+
+export const Tabs = Object.assign(TabsRoot, {
+	Context: TabsRootContext,
+	List: TabsList,
+	Trigger: TabsTrigger,
+	Indicator: tabsIndicator,
+	Content: TabsContent
+});
diff --git a/packages/skeleton-react/src/components/tabs/modules/tabs-root-context.ts b/packages/skeleton-react/src/components/tabs/modules/tabs-root-context.ts
new file mode 100644
index 0000000000..ab132d93ec
--- /dev/null
+++ b/packages/skeleton-react/src/components/tabs/modules/tabs-root-context.ts
@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import type { Api } from '@zag-js/tabs';
+
+export interface TabsRootContextType {
+	api: Api;
+}
+
+export const TabsRootContext = createContext<TabsRootContextType>(null!);
diff --git a/packages/skeleton-react/src/index.ts b/packages/skeleton-react/src/index.ts
index a21d834045..c8536e9361 100644
--- a/packages/skeleton-react/src/index.ts
+++ b/packages/skeleton-react/src/index.ts
@@ -1,3 +1,4 @@
 export * from './components/accordion/index.js';
 export * from './components/avatar/index.js';
 export * from './components/rating-group/index.js';
+export * from './components/tabs/index.js';
diff --git a/packages/skeleton-react/test/components/tabs/index.test.tsx b/packages/skeleton-react/test/components/tabs/index.test.tsx
new file mode 100644
index 0000000000..24b5fbabe7
--- /dev/null
+++ b/packages/skeleton-react/test/components/tabs/index.test.tsx
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Tabs from './tabs.js';
+
+describe('tabs', () => {
+	describe('root', () => {
+		it('renders', () => {
+			render(<Tabs />);
+			expect(screen.getByTestId('root')).toBeInTheDocument();
+		});
+	});
+
+	describe('list', () => {
+		it('renders', () => {
+			render(<Tabs />);
+			expect(screen.getByTestId('list')).toBeInTheDocument();
+		});
+	});
+
+	describe('trigger', () => {
+		it('renders', () => {
+			render(<Tabs />);
+			expect(screen.getByTestId('trigger')).toBeInTheDocument();
+		});
+	});
+
+	describe('indicator', () => {
+		it('renders', () => {
+			render(<Tabs />);
+			expect(screen.getByTestId('indicator')).toBeInTheDocument();
+		});
+	});
+
+	describe('content', () => {
+		it('renders', () => {
+			render(<Tabs />);
+			expect(screen.getByTestId('content')).toBeInTheDocument();
+		});
+	});
+});
diff --git a/packages/skeleton-react/test/components/tabs/tabs.tsx b/packages/skeleton-react/test/components/tabs/tabs.tsx
new file mode 100644
index 0000000000..5ac097817a
--- /dev/null
+++ b/packages/skeleton-react/test/components/tabs/tabs.tsx
@@ -0,0 +1,13 @@
+import { Tabs } from '@skeletonlabs/skeleton-react';
+
+export default function () {
+	return (
+		<Tabs defaultValue="tab-1" data-testid="root">
+			<Tabs.List data-testid="list">
+				<Tabs.Trigger value="tab" data-testid="trigger" />
+				<Tabs.Indicator data-testid="indicator" />
+			</Tabs.List>
+			<Tabs.Content value="tab" data-testid="content" />
+		</Tabs>
+	);
+}
diff --git a/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-content.svelte b/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-content.svelte
new file mode 100644
index 0000000000..385ee67a52
--- /dev/null
+++ b/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-content.svelte
@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { ContentProps } from '@zag-js/tabs';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface TabsContentProps extends ContentProps, PropsWithElement, HTMLAttributes<HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+	import { TabsRootContext } from '../modules/tabs-root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+	import { classesTabs } from '@skeletonlabs/skeleton-common';
+	import { splitContentProps } from '@zag-js/tabs';
+
+	const props: TabsContentProps = $props();
+	const rootContext = TabsRootContext.consume();
+	const [contentProps, componentProps] = $derived(splitContentProps(props));
+	const { element, children, ...restAttributes } = $derived(componentProps);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getContentProps(contentProps),
+			{
+				class: classesTabs.content
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-indicator.svelte b/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-indicator.svelte
new file mode 100644
index 0000000000..0097e5c816
--- /dev/null
+++ b/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-indicator.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface TabsIndicatorProps extends PropsWithElement, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {}
+</script>
+
+<script lang="ts">
+	import { TabsRootContext } from '../modules/tabs-root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+	import { classesTabs } from '@skeletonlabs/skeleton-common';
+
+	const props: TabsIndicatorProps = $props();
+	const rootContext = TabsRootContext.consume();
+	const { element, ...restAttributes } = $derived(props);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getIndicatorProps(),
+			{
+				class: classesTabs.indicator
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}></div>
+{/if}
diff --git a/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-list.svelte b/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-list.svelte
new file mode 100644
index 0000000000..8ab2ae3bda
--- /dev/null
+++ b/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-list.svelte
@@ -0,0 +1,33 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface TabsListProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+	import { TabsRootContext } from '../modules/tabs-root-context';
+	import { mergeProps } from '@zag-js/svelte';
+	import { classesTabs } from '@skeletonlabs/skeleton-common';
+
+	const props: TabsListProps = $props();
+	const rootContext = TabsRootContext.consume();
+	const { element, children, ...restAttributes } = $derived(props);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getListProps(),
+			{
+				class: classesTabs.list
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-root-context.svelte b/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-root-context.svelte
new file mode 100644
index 0000000000..3ef87b3835
--- /dev/null
+++ b/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-root-context.svelte
@@ -0,0 +1,17 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { TabsRootContextType } from '../modules/tabs-root-context.js';
+
+	export interface TabsRootContextProps {
+		children: Snippet<[TabsRootContextType]>;
+	}
+</script>
+
+<script lang="ts">
+	import { TabsRootContext } from '../modules/tabs-root-context.js';
+
+	const props: TabsRootContextProps = $props();
+	const rootContext = TabsRootContext.consume();
+</script>
+
+{@render props.children(rootContext)}
diff --git a/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-root.svelte b/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-root.svelte
new file mode 100644
index 0000000000..d7e89a9b32
--- /dev/null
+++ b/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-root.svelte
@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import type { Props } from '@zag-js/tabs';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface TabsRootProps
+		extends Omit<Props, 'id'>,
+			PropsWithElement,
+			Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { connect, machine, splitProps } from '@zag-js/tabs';
+	import { classesTabs } from '@skeletonlabs/skeleton-common';
+	import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
+	import { TabsRootContext } from '../modules/tabs-root-context.js';
+
+	const props: TabsRootProps = $props();
+	const [machineProps, componentProps] = $derived(splitProps(props));
+	const { element, children, ...restAttributes } = $derived(componentProps);
+	const id = $props.id();
+	const service = useMachine(machine, () => ({
+		id: id,
+		...machineProps
+	}));
+	const api = $derived(connect(service, normalizeProps));
+	const attributes = $derived(
+		mergeProps(
+			api.getRootProps(),
+			{
+				class: classesTabs.root
+			},
+			restAttributes
+		)
+	);
+	TabsRootContext.provide({
+		get api() {
+			return api;
+		}
+	});
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-trigger.svelte b/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-trigger.svelte
new file mode 100644
index 0000000000..55462ff8cb
--- /dev/null
+++ b/packages/skeleton-svelte/src/components/tabs/anatomy/tabs-trigger.svelte
@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { TriggerProps } from '@zag-js/tabs';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface TabsTriggerProps extends TriggerProps, PropsWithElement, Omit<HTMLButtonAttributes, 'value' | 'disabled'> {}
+</script>
+
+<script lang="ts">
+	import { TabsRootContext } from '../modules/tabs-root-context';
+	import { mergeProps } from '@zag-js/svelte';
+	import { classesTabs } from '@skeletonlabs/skeleton-common';
+	import { splitTriggerProps } from '@zag-js/tabs';
+
+	const props: TabsTriggerProps = $props();
+	const rootContext = TabsRootContext.consume();
+	const [triggerProps, componentProps] = $derived(splitTriggerProps(props));
+	const { element, children, ...restAttributes } = $derived(componentProps);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getTriggerProps(triggerProps),
+			{
+				class: classesTabs.trigger
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/packages/skeleton-svelte/src/components/tabs/index.ts b/packages/skeleton-svelte/src/components/tabs/index.ts
new file mode 100644
index 0000000000..ca0babc27f
--- /dev/null
+++ b/packages/skeleton-svelte/src/components/tabs/index.ts
@@ -0,0 +1 @@
+export * from './modules/tabs-anatomy.js';
diff --git a/packages/skeleton-svelte/src/components/tabs/modules/tabs-anatomy.ts b/packages/skeleton-svelte/src/components/tabs/modules/tabs-anatomy.ts
new file mode 100644
index 0000000000..2ae6474432
--- /dev/null
+++ b/packages/skeleton-svelte/src/components/tabs/modules/tabs-anatomy.ts
@@ -0,0 +1,14 @@
+import TabsRoot from '../anatomy/tabs-root.svelte';
+import TabsRootContext from '../anatomy/tabs-root-context.svelte';
+import TabsList from '../anatomy/tabs-list.svelte';
+import TabsTrigger from '../anatomy/tabs-trigger.svelte';
+import TabsIndicator from '../anatomy/tabs-indicator.svelte';
+import TabsContent from '../anatomy/tabs-content.svelte';
+
+export const Tabs = Object.assign(TabsRoot, {
+	Context: TabsRootContext,
+	List: TabsList,
+	Trigger: TabsTrigger,
+	Indicator: TabsIndicator,
+	Content: TabsContent
+});
diff --git a/packages/skeleton-svelte/src/components/tabs/modules/tabs-root-context.ts b/packages/skeleton-svelte/src/components/tabs/modules/tabs-root-context.ts
new file mode 100644
index 0000000000..29e5290f1a
--- /dev/null
+++ b/packages/skeleton-svelte/src/components/tabs/modules/tabs-root-context.ts
@@ -0,0 +1,8 @@
+import { createContext } from '@/internal/create-context.js';
+import type { Api } from '@zag-js/tabs';
+
+export interface TabsRootContextType {
+	api: Api;
+}
+
+export const TabsRootContext = createContext<TabsRootContextType>();
diff --git a/packages/skeleton-svelte/src/index.ts b/packages/skeleton-svelte/src/index.ts
index a21d834045..c8536e9361 100644
--- a/packages/skeleton-svelte/src/index.ts
+++ b/packages/skeleton-svelte/src/index.ts
@@ -1,3 +1,4 @@
 export * from './components/accordion/index.js';
 export * from './components/avatar/index.js';
 export * from './components/rating-group/index.js';
+export * from './components/tabs/index.js';
diff --git a/packages/skeleton-svelte/test/components/tabs/index.test.ts b/packages/skeleton-svelte/test/components/tabs/index.test.ts
new file mode 100644
index 0000000000..63d65e5503
--- /dev/null
+++ b/packages/skeleton-svelte/test/components/tabs/index.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Tabs from './tabs.svelte';
+
+describe('tabs', () => {
+	describe('root', () => {
+		it('renders', () => {
+			const screen = render(Tabs);
+			expect(screen.getByTestId('root')).toBeInTheDocument();
+		});
+	});
+
+	describe('list', () => {
+		it('renders', () => {
+			const screen = render(Tabs);
+			expect(screen.getByTestId('list')).toBeInTheDocument();
+		});
+	});
+
+	describe('trigger', () => {
+		it('renders', () => {
+			const screen = render(Tabs);
+			expect(screen.getByTestId('trigger')).toBeInTheDocument();
+		});
+	});
+
+	describe('indicator', () => {
+		it('renders', () => {
+			const screen = render(Tabs);
+			expect(screen.getByTestId('indicator')).toBeInTheDocument();
+		});
+	});
+
+	describe('content', () => {
+		it('renders', () => {
+			const screen = render(Tabs);
+			expect(screen.getByTestId('content')).toBeInTheDocument();
+		});
+	});
+});
diff --git a/packages/skeleton-svelte/test/components/tabs/tabs.svelte b/packages/skeleton-svelte/test/components/tabs/tabs.svelte
new file mode 100644
index 0000000000..daf6eb1d53
--- /dev/null
+++ b/packages/skeleton-svelte/test/components/tabs/tabs.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Tabs } from '@skeletonlabs/skeleton-svelte';
+</script>
+
+<Tabs data-testid="root">
+	<Tabs.List data-testid="list">
+		<Tabs.Trigger value="tab" data-testid="trigger" />
+		<Tabs.Indicator data-testid="indicator" />
+	</Tabs.List>
+	<Tabs.Content value="tab" data-testid="content" />
+</Tabs>
diff --git a/playgrounds/skeleton-react/src/app/components/tabs/page.tsx b/playgrounds/skeleton-react/src/app/components/tabs/page.tsx
new file mode 100644
index 0000000000..54a43e5493
--- /dev/null
+++ b/playgrounds/skeleton-react/src/app/components/tabs/page.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { Tabs } from '@skeletonlabs/skeleton-react';
+
+export default function Page() {
+	return (
+		<Tabs defaultValue="tab-1">
+			<Tabs.List>
+				<Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
+				<Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
+				<Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
+				<Tabs.Indicator />
+			</Tabs.List>
+			<Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
+			<Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
+			<Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
+		</Tabs>
+	);
+}
diff --git a/playgrounds/skeleton-react/src/app/layout.tsx b/playgrounds/skeleton-react/src/app/layout.tsx
index a67de81040..66ae92a104 100644
--- a/playgrounds/skeleton-react/src/app/layout.tsx
+++ b/playgrounds/skeleton-react/src/app/layout.tsx
@@ -33,6 +33,9 @@ export default function RootLayout({
 								<a className="anchor" href="/components/rating-group">
 									Rating Group
 								</a>
+								<a className="anchor" href="/components/tabs">
+									Tabs
+								</a>
 							</nav>
 						</div>
 					</div>
diff --git a/playgrounds/skeleton-svelte/src/routes/+layout.svelte b/playgrounds/skeleton-svelte/src/routes/+layout.svelte
index 00bd0b3450..2e1483731d 100644
--- a/playgrounds/skeleton-svelte/src/routes/+layout.svelte
+++ b/playgrounds/skeleton-svelte/src/routes/+layout.svelte
@@ -20,6 +20,7 @@
 					<a class="anchor" href="/components/accordion">Accordions</a>
 					<a class="anchor" href="/components/avatar">Avatars</a>
 					<a class="anchor" href="/components/rating-group">Rating Group</a>
+					<a class="anchor" href="/components/tabs">Tabs</a>
 				</nav>
 			</div>
 		</header>
diff --git a/playgrounds/skeleton-svelte/src/routes/components/tabs/+page.svelte b/playgrounds/skeleton-svelte/src/routes/components/tabs/+page.svelte
new file mode 100644
index 0000000000..cac9d7b366
--- /dev/null
+++ b/playgrounds/skeleton-svelte/src/routes/components/tabs/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Tabs } from '@skeletonlabs/skeleton-svelte';
+</script>
+
+<Tabs defaultValue="tab-1">
+	<Tabs.List>
+		<Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
+		<Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
+		<Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
+		<Tabs.Indicator />
+	</Tabs.List>
+	<Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
+	<Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
+	<Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
+</Tabs>
diff --git a/sites/skeleton.dev/src/content/docs/components/tabs/meta.mdx b/sites/skeleton.dev/src/content/docs/components/tabs/meta.mdx
new file mode 100644
index 0000000000..289c3b54d2
--- /dev/null
+++ b/sites/skeleton.dev/src/content/docs/components/tabs/meta.mdx
@@ -0,0 +1,8 @@
+---
+title: Tabs
+description: Use tabs to quickly switch between different views and pages.
+srcSvelte: '/src/components/tabs'
+srcReact: '/src/components/tabs'
+srcZag: 'https://zagjs.com/components/react/tabs'
+showDocsUrl: true
+---
diff --git a/sites/skeleton.dev/src/content/docs/components/tabs/react.mdx b/sites/skeleton.dev/src/content/docs/components/tabs/react.mdx
new file mode 100644
index 0000000000..bfffdb7c81
--- /dev/null
+++ b/sites/skeleton.dev/src/content/docs/components/tabs/react.mdx
@@ -0,0 +1,77 @@
+---
+layout: '@layouts/LayoutDoc.astro'
+---
+
+export const components = componentSet;
+
+import Example from '@examples/components/tabs/react/default.tsx';
+import ExampleRaw from '@examples/components/tabs/react/default.tsx?raw';
+
+import ExampleAnchor from '@examples/components/tabs/react/anchor.tsx';
+import ExampleAnchorRaw from '@examples/components/tabs/react/anchor.tsx?raw';
+
+import ExampleFluid from '@examples/components/tabs/react/fluid.tsx';
+import ExampleFluidRaw from '@examples/components/tabs/react/fluid.tsx?raw';
+
+import ExampleVertical from '@examples/components/tabs/react/vertical.tsx';
+import ExampleVerticalRaw from '@examples/components/tabs/react/vertical.tsx?raw';
+
+import ExampleRtl from '@examples/components/tabs/react/rtl.tsx';
+import ExampleRtlRaw from '@examples/components/tabs/react/rtl.tsx?raw';
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<Example client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleRaw} lang="tsx" />
+	</Fragment>
+</Preview>
+
+## Anchor
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleAnchor client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleAnchorRaw} lang="tsx" />
+	</Fragment>
+</Preview>
+
+## Fluid
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleFluid client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleFluidRaw} lang="tsx" />
+	</Fragment>
+</Preview>
+
+## Vertical
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleVertical client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleVerticalRaw} lang="tsx" />
+	</Fragment>
+</Preview>
+
+## RTL
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleRtl client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleRtlRaw} lang="tsx" />
+	</Fragment>
+</Preview>
+
+## API Reference
+
+<ApiTable />
diff --git a/sites/skeleton.dev/src/content/docs/components/tabs/svelte.mdx b/sites/skeleton.dev/src/content/docs/components/tabs/svelte.mdx
new file mode 100644
index 0000000000..e51a1f548e
--- /dev/null
+++ b/sites/skeleton.dev/src/content/docs/components/tabs/svelte.mdx
@@ -0,0 +1,77 @@
+---
+layout: '@layouts/LayoutDoc.astro'
+---
+
+export const components = componentSet;
+
+import Example from '@examples/components/tabs/svelte/default.svelte';
+import ExampleRaw from '@examples/components/tabs/svelte/default.svelte?raw';
+
+import ExampleAnchor from '@examples/components/tabs/svelte/anchor.svelte';
+import ExampleAnchorRaw from '@examples/components/tabs/svelte/anchor.svelte?raw';
+
+import ExampleFluid from '@examples/components/tabs/svelte/fluid.svelte';
+import ExampleFluidRaw from '@examples/components/tabs/svelte/fluid.svelte?raw';
+
+import ExampleVertical from '@examples/components/tabs/svelte/vertical.svelte';
+import ExampleVerticalRaw from '@examples/components/tabs/svelte/vertical.svelte?raw';
+
+import ExampleRtl from '@examples/components/tabs/svelte/rtl.svelte';
+import ExampleRtlRaw from '@examples/components/tabs/svelte/rtl.svelte?raw';
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<Example client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleRaw} lang="svelte" />
+	</Fragment>
+</Preview>
+
+## Anchor
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleAnchor client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleAnchorRaw} lang="svelte" />
+	</Fragment>
+</Preview>
+
+## Fluid
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleFluid client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleFluidRaw} lang="svelte" />
+	</Fragment>
+</Preview>
+
+## Vertical
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleVertical client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleVerticalRaw} lang="svelte" />
+	</Fragment>
+</Preview>
+
+## RTL
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleRtl client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleRtlRaw} lang="svelte" />
+	</Fragment>
+</Preview>
+
+## API Reference
+
+<ApiTable />
diff --git a/sites/skeleton.dev/src/examples/components/tabs/react/anchor.tsx b/sites/skeleton.dev/src/examples/components/tabs/react/anchor.tsx
new file mode 100644
index 0000000000..c537719997
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/components/tabs/react/anchor.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { Tabs } from '@skeletonlabs/skeleton-react';
+
+export default function () {
+	return (
+		<Tabs defaultValue="tab-1">
+			<Tabs.List>
+				<Tabs.Trigger
+					value="tab-1"
+					element={({ attributes }) => (
+						<a href="#tab-1" {...attributes}>
+							Tab 1
+						</a>
+					)}
+				/>
+				<Tabs.Trigger
+					value="tab-2"
+					element={({ attributes }) => (
+						<a href="#tab-2" {...attributes}>
+							Tab 2
+						</a>
+					)}
+				/>
+				<Tabs.Trigger
+					value="tab-3"
+					element={({ attributes }) => (
+						<a href="#tab-3" {...attributes}>
+							Tab 3
+						</a>
+					)}
+				/>
+				<Tabs.Indicator />
+			</Tabs.List>
+			<Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
+			<Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
+			<Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
+		</Tabs>
+	);
+}
diff --git a/sites/skeleton.dev/src/examples/components/tabs/react/default.tsx b/sites/skeleton.dev/src/examples/components/tabs/react/default.tsx
new file mode 100644
index 0000000000..a23268037c
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/components/tabs/react/default.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { Tabs } from '@skeletonlabs/skeleton-react';
+
+export default function () {
+	return (
+		<Tabs defaultValue="tab-1">
+			<Tabs.List>
+				<Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
+				<Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
+				<Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
+				<Tabs.Indicator />
+			</Tabs.List>
+			<Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
+			<Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
+			<Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
+		</Tabs>
+	);
+}
diff --git a/sites/skeleton.dev/src/examples/components/tabs/react/fluid.tsx b/sites/skeleton.dev/src/examples/components/tabs/react/fluid.tsx
new file mode 100644
index 0000000000..3b8457717b
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/components/tabs/react/fluid.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { Tabs } from '@skeletonlabs/skeleton-react';
+
+export default function () {
+	return (
+		<Tabs defaultValue="tab-1">
+			<Tabs.List>
+				<Tabs.Trigger className="flex-1" value="tab-1">
+					Tab 1
+				</Tabs.Trigger>
+				<Tabs.Trigger className="flex-1" value="tab-2">
+					Tab 2
+				</Tabs.Trigger>
+				<Tabs.Trigger className="flex-1" value="tab-3">
+					Tab 3
+				</Tabs.Trigger>
+				<Tabs.Indicator />
+			</Tabs.List>
+			<Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
+			<Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
+			<Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
+		</Tabs>
+	);
+}
diff --git a/sites/skeleton.dev/src/examples/components/tabs/react/rtl.tsx b/sites/skeleton.dev/src/examples/components/tabs/react/rtl.tsx
new file mode 100644
index 0000000000..9ee85ae2da
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/components/tabs/react/rtl.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { Tabs } from '@skeletonlabs/skeleton-react';
+
+export default function () {
+	return (
+		<Tabs defaultValue="tab-1" dir="rtl">
+			<Tabs.List>
+				<Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
+				<Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
+				<Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
+				<Tabs.Indicator />
+			</Tabs.List>
+			<Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
+			<Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
+			<Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
+		</Tabs>
+	);
+}
diff --git a/sites/skeleton.dev/src/examples/components/tabs/react/vertical.tsx b/sites/skeleton.dev/src/examples/components/tabs/react/vertical.tsx
new file mode 100644
index 0000000000..47be35cb6e
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/components/tabs/react/vertical.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { Tabs } from '@skeletonlabs/skeleton-react';
+
+export default function () {
+	return (
+		<Tabs defaultValue="tab-1" orientation="vertical">
+			<Tabs.List>
+				<Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
+				<Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
+				<Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
+				<Tabs.Indicator />
+			</Tabs.List>
+			<Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
+			<Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
+			<Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
+		</Tabs>
+	);
+}
diff --git a/sites/skeleton.dev/src/examples/components/tabs/svelte/anchor.svelte b/sites/skeleton.dev/src/examples/components/tabs/svelte/anchor.svelte
new file mode 100644
index 0000000000..f392415d89
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/components/tabs/svelte/anchor.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Tabs } from '@skeletonlabs/skeleton-svelte';
+</script>
+
+<Tabs defaultValue="tab-1">
+	<Tabs.List>
+		<Tabs.Trigger value="tab-1">
+			{#snippet element({ attributes })}
+				<a href="#tab-1" {...attributes}>Tab 1</a>
+			{/snippet}
+		</Tabs.Trigger>
+		<Tabs.Trigger value="tab-2">
+			{#snippet element({ attributes })}
+				<a href="#tab-2" {...attributes}>Tab 2</a>
+			{/snippet}
+		</Tabs.Trigger>
+		<Tabs.Trigger value="tab-3">
+			{#snippet element({ attributes })}
+				<a href="#tab-3" {...attributes}>Tab 3</a>
+			{/snippet}
+		</Tabs.Trigger>
+		<Tabs.Indicator />
+	</Tabs.List>
+	<Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
+	<Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
+	<Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
+</Tabs>
diff --git a/sites/skeleton.dev/src/examples/components/tabs/svelte/default.svelte b/sites/skeleton.dev/src/examples/components/tabs/svelte/default.svelte
new file mode 100644
index 0000000000..cac9d7b366
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/components/tabs/svelte/default.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Tabs } from '@skeletonlabs/skeleton-svelte';
+</script>
+
+<Tabs defaultValue="tab-1">
+	<Tabs.List>
+		<Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
+		<Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
+		<Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
+		<Tabs.Indicator />
+	</Tabs.List>
+	<Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
+	<Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
+	<Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
+</Tabs>
diff --git a/sites/skeleton.dev/src/examples/components/tabs/svelte/fluid.svelte b/sites/skeleton.dev/src/examples/components/tabs/svelte/fluid.svelte
new file mode 100644
index 0000000000..5d1711f097
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/components/tabs/svelte/fluid.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Tabs } from '@skeletonlabs/skeleton-svelte';
+</script>
+
+<Tabs defaultValue="tab-1">
+	<Tabs.List>
+		<Tabs.Trigger class="flex-1" value="tab-1">Tab 1</Tabs.Trigger>
+		<Tabs.Trigger class="flex-1" value="tab-2">Tab 2</Tabs.Trigger>
+		<Tabs.Trigger class="flex-1" value="tab-3">Tab 3</Tabs.Trigger>
+		<Tabs.Indicator />
+	</Tabs.List>
+	<Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
+	<Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
+	<Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
+</Tabs>
diff --git a/sites/skeleton.dev/src/examples/components/tabs/svelte/rtl.svelte b/sites/skeleton.dev/src/examples/components/tabs/svelte/rtl.svelte
new file mode 100644
index 0000000000..362446704e
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/components/tabs/svelte/rtl.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Tabs } from '@skeletonlabs/skeleton-svelte';
+</script>
+
+<Tabs defaultValue="tab-1" dir="rtl">
+	<Tabs.List>
+		<Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
+		<Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
+		<Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
+		<Tabs.Indicator />
+	</Tabs.List>
+	<Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
+	<Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
+	<Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
+</Tabs>
diff --git a/sites/skeleton.dev/src/examples/components/tabs/svelte/vertical.svelte b/sites/skeleton.dev/src/examples/components/tabs/svelte/vertical.svelte
new file mode 100644
index 0000000000..d6faa41191
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/components/tabs/svelte/vertical.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Tabs } from '@skeletonlabs/skeleton-svelte';
+</script>
+
+<Tabs defaultValue="tab-1" orientation="vertical">
+	<Tabs.List>
+		<Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
+		<Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
+		<Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
+		<Tabs.Indicator />
+	</Tabs.List>
+	<Tabs.Content value="tab-1">Content for Tab 1</Tabs.Content>
+	<Tabs.Content value="tab-2">Content for Tab 2</Tabs.Content>
+	<Tabs.Content value="tab-3">Content for Tab 3</Tabs.Content>
+</Tabs>