diff --git a/.changeset/nine-worms-cheat.md b/.changeset/nine-worms-cheat.md
new file mode 100644
index 0000000000..6c643cb528
--- /dev/null
+++ b/.changeset/nine-worms-cheat.md
@@ -0,0 +1,14 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: Multiple revisions and updates to the Tree View feature:
+- Enhanced and properly named non-recursive tree-view events.
+- Separated the recursive tree-view under the new component RecursiveTreeView.
+- RecursiveTreeView now utilizes the `relational` prop to enable relational checking.
+- RecursiveTreeView is now using ID arrays with 2-way binding to control the tree-view state, including:
+    - `expandedNodes`
+    - `disabledNodes`
+    - `checkedNodes`
+    - `indeterminateNodes` (has effect only in multiple relational mode)
+- TreeViewNode now requires a unique ID to support the new checking system.
\ No newline at end of file
diff --git a/packages/skeleton/src/lib/components/TreeView/RecursiveTreeView.svelte b/packages/skeleton/src/lib/components/TreeView/RecursiveTreeView.svelte
new file mode 100644
index 0000000000..f465ec6c7d
--- /dev/null
+++ b/packages/skeleton/src/lib/components/TreeView/RecursiveTreeView.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+
+	// Types
+	import type { CssClasses, TreeViewNode } from '../../index.js';
+	import RecursiveTreeViewItem from './RecursiveTreeViewItem.svelte';
+
+	// Props (parent)
+	/** Enable tree-view selection. */
+	export let selection = false;
+	/** Enable selection of multiple items. */
+	export let multiple = false;
+	/** Enable relational checking. */
+	export let relational = false;
+	/**
+	 * Provide data-driven nodes.
+	 * @type {TreeViewNode[]}
+	 */
+	export let nodes: TreeViewNode[] = [];
+	/**
+	 * provides id's of expanded nodes
+	 * @type {string[]}
+	 */
+	export let expandedNodes: string[] = [];
+	/**
+	 * provides id's of disabled nodes
+	 * @type {string[]}
+	 */
+	export let disabledNodes: string[] = [];
+	/**
+	 * provides id's of checked nodes
+	 * @type {string[]}
+	 */
+	export let checkedNodes: string[] = [];
+	/**
+	 * provides id's of indeterminate nodes
+	 * @type {string[]}
+	 */
+	export let indeterminateNodes: string[] = [];
+	/** Provide classes to set the tree width. */
+	export let width: CssClasses = 'w-full';
+	/** Provide classes to set the vertical spacing between items. */
+	export let spacing: CssClasses = 'space-y-1';
+
+	// Props (children)
+	/** Set open by default on load. */
+	export let open = false;
+	/** Set the tree disabled state */
+	export let disabled = false;
+	/** Provide classes to set the tree item padding styles. */
+	export let padding: CssClasses = 'py-4 px-4';
+	/** Provide classes to set the tree children indentation */
+	export let indent: CssClasses = 'ml-4';
+	/** Provide classes to set the tree item hover styles. */
+	export let hover: CssClasses = 'hover:variant-soft';
+	/** Provide classes to set the tree item rounded styles. */
+	export let rounded: CssClasses = 'rounded-container-token';
+
+	// Props (symbols)
+	/** Set the rotation of the item caret in the open state. */
+	export let caretOpen: CssClasses = 'rotate-180';
+	/** Set the rotation of the item caret in the closed state. */
+	export let caretClosed: CssClasses = '';
+	/* Set the hyphen symbol opacity for non-expandable rows. */
+	export let hyphenOpacity: CssClasses = 'opacity-10';
+
+	// Props (regions)
+	/** Provide arbitrary classes to the tree item summary region. */
+	export let regionSummary: CssClasses = '';
+	/** Provide arbitrary classes to the symbol icon region. */
+	export let regionSymbol: CssClasses = '';
+	/** Provide arbitrary classes to the children region. */
+	export let regionChildren: CssClasses = '';
+
+	// Props A11y
+	/** Provide the ARIA labelledby value. */
+	export let labelledby = '';
+
+	// Context API
+	setContext('open', open);
+	setContext('selection', selection);
+	setContext('multiple', multiple);
+	setContext('relational', relational);
+	setContext('disabled', disabled);
+	setContext('padding', padding);
+	setContext('indent', indent);
+	setContext('hover', hover);
+	setContext('rounded', rounded);
+	setContext('caretOpen', caretOpen);
+	setContext('caretClosed', caretClosed);
+	setContext('hyphenOpacity', hyphenOpacity);
+	setContext('regionSummary', regionSummary);
+	setContext('regionSymbol', regionSymbol);
+	setContext('regionChildren', regionChildren);
+
+	// Reactive
+	$: classesBase = `${width} ${spacing} ${$$props.class ?? ''}`;
+</script>
+
+<div
+	class="tree {classesBase}"
+	data-testid="tree"
+	role="tree"
+	aria-multiselectable={multiple}
+	aria-label={labelledby}
+	aria-disabled={disabled}
+>
+	{#if nodes && nodes.length > 0}
+		<RecursiveTreeViewItem {nodes} bind:expandedNodes bind:disabledNodes bind:checkedNodes bind:indeterminateNodes />
+	{/if}
+</div>
diff --git a/packages/skeleton/src/lib/components/TreeView/RecursiveTreeViewItem.svelte b/packages/skeleton/src/lib/components/TreeView/RecursiveTreeViewItem.svelte
new file mode 100644
index 0000000000..68ee74302b
--- /dev/null
+++ b/packages/skeleton/src/lib/components/TreeView/RecursiveTreeViewItem.svelte
@@ -0,0 +1,161 @@
+<script lang="ts">
+	import TreeViewItem from './TreeViewItem.svelte';
+	import RecursiveTreeViewItem from './RecursiveTreeViewItem.svelte';
+	import type { TreeViewNode } from './types.js';
+	import { getContext, onMount, tick } from 'svelte';
+
+	// this can't be passed using context, since we have to pass it to recursive children.
+	/** Provide data-driven nodes. */
+	export let nodes: TreeViewNode[] = [];
+
+	/**
+	 * provides id's of expanded nodes
+	 * @type {string[]}
+	 */
+	export let expandedNodes: string[] = [];
+	/**
+	 * provides id's of disabled nodes
+	 * @type {string[]}
+	 */
+	export let disabledNodes: string[] = [];
+	/**
+	 * provides id's of checked nodes
+	 * @type {string[]}
+	 */
+	export let checkedNodes: string[] = [];
+	/**
+	 * provides id's of indeterminate nodes
+	 * @type {string[]}
+	 */
+	export let indeterminateNodes: string[] = [];
+
+	// Context API
+	let selection: boolean = getContext('selection');
+	let multiple: boolean = getContext('multiple');
+	let relational: boolean = getContext('relational');
+
+	let tempCheckedNodes: string[] = [];
+
+	// Locals
+	let group: unknown;
+	let name = '';
+
+	function toggleNode(node: TreeViewNode, open: boolean) {
+		// toggle only nodes with children
+		if (!node.children?.length) return;
+		if (open) {
+			// node is not registered as opened
+			if (!expandedNodes.includes(node.id)) {
+				expandedNodes.push(node.id);
+				expandedNodes = expandedNodes;
+			}
+		} else {
+			// node is registered as open
+			if (expandedNodes.includes(node.id)) {
+				expandedNodes.splice(expandedNodes.indexOf(node.id), 1);
+				expandedNodes = expandedNodes;
+			}
+		}
+	}
+
+	function checkNode(node: TreeViewNode, checked: boolean, indeterminate: boolean) {
+		if (checked) {
+			// node is not registered as checked
+			if (!checkedNodes.includes(node.id)) {
+				checkedNodes.push(node.id);
+				checkedNodes = checkedNodes;
+			}
+
+			// node is not indeterminate but registered as indeterminate
+			if (!indeterminate && indeterminateNodes.includes(node.id)) {
+				indeterminateNodes.splice(indeterminateNodes.indexOf(node.id), 1);
+				indeterminateNodes = indeterminateNodes;
+			}
+		} else {
+			// node is registered as checked
+			if (checkedNodes.includes(node.id)) {
+				checkedNodes.splice(checkedNodes.indexOf(node.id), 1);
+				checkedNodes = checkedNodes;
+			}
+
+			// node is indeterminate but not registered as indeterminate
+			if (indeterminate && !indeterminateNodes.includes(node.id)) {
+				indeterminateNodes.push(node.id);
+				indeterminateNodes = indeterminateNodes;
+				// node is not indeterminate but registered as indeterminate
+			} else if (!indeterminate && indeterminateNodes.includes(node.id)) {
+				indeterminateNodes.splice(indeterminateNodes.indexOf(node.id), 1);
+				indeterminateNodes = indeterminateNodes;
+			}
+		}
+	}
+
+	// init check flow will messup the checked nodes, so we save it to reassign it onMount.
+	tempCheckedNodes = [...checkedNodes];
+	onMount(async () => {
+		if (selection) {
+			// random number as name
+			name = String(Math.random());
+
+			// init groups if not initialized yet
+			if (group === undefined) {
+				if (multiple) {
+					group = [];
+					nodes.forEach((node) => {
+						if (checkedNodes.includes(node.id) && Array.isArray(group)) group.push(node.id);
+					});
+					group = group;
+				} else if (!nodes.some((node) => checkedNodes.includes(node.id))) {
+					group = '';
+				}
+			}
+
+			// remove relational links
+			if (!relational) treeItems = [];
+
+			// reassign checkNodes to ensure component starting with the correct check values.
+			checkedNodes = [];
+			await tick();
+			checkedNodes = [...tempCheckedNodes];
+		}
+	});
+
+	// important to pass children up to items (recursively)
+	export let treeItems: TreeViewItem[] = [];
+	let children: TreeViewItem[][] = [];
+</script>
+
+{#if nodes && nodes.length > 0}
+	{#each nodes as node, i}
+		<TreeViewItem
+			bind:this={treeItems[i]}
+			bind:children={children[i]}
+			bind:group
+			bind:name
+			bind:value={node.id}
+			hideLead={!node.lead}
+			hideChildren={!node.children || node.children.length === 0}
+			open={expandedNodes.includes(node.id)}
+			disabled={disabledNodes.includes(node.id)}
+			checked={checkedNodes.includes(node.id)}
+			indeterminate={indeterminateNodes.includes(node.id)}
+			on:toggle={(e) => toggleNode(node, e.detail.open)}
+			on:groupChange={(e) => checkNode(node, e.detail.checked, e.detail.indeterminate)}
+		>
+			{@html node.content}
+			<svelte:fragment slot="lead">
+				{@html node.lead}
+			</svelte:fragment>
+			<svelte:fragment slot="children">
+				<RecursiveTreeViewItem
+					nodes={node.children}
+					bind:expandedNodes
+					bind:disabledNodes
+					bind:checkedNodes
+					bind:indeterminateNodes
+					bind:treeItems={children[i]}
+				/>
+			</svelte:fragment>
+		</TreeViewItem>
+	{/each}
+{/if}
diff --git a/packages/skeleton/src/lib/components/TreeView/TreeView.svelte b/packages/skeleton/src/lib/components/TreeView/TreeView.svelte
index 6355e81542..337e512cd0 100644
--- a/packages/skeleton/src/lib/components/TreeView/TreeView.svelte
+++ b/packages/skeleton/src/lib/components/TreeView/TreeView.svelte
@@ -2,19 +2,13 @@
 	import { setContext } from 'svelte';
 
 	// Types
-	import type { CssClasses, TreeViewNode } from '../../index.js';
-	import TreeViewDataDrivenItem from './TreeViewDataDrivenItem.svelte';
+	import type { CssClasses } from '../../index.js';
 
 	// Props (parent)
 	/** Enable tree-view selection. */
 	export let selection = false;
 	/** Enable selection of multiple items. */
 	export let multiple = false;
-	/**
-	 * Provide data-driven nodes.
-	 * @type {TreeViewNode[]}
-	 */
-	export let nodes: TreeViewNode[] = [];
 	/** Provide classes to set the tree width. */
 	export let width: CssClasses = 'w-full';
 	/** Provide classes to set the vertical spacing between items. */
@@ -114,9 +108,5 @@
 	aria-label={labelledby}
 	aria-disabled={disabled}
 >
-	{#if nodes && nodes.length > 0}
-		<TreeViewDataDrivenItem bind:nodes on:change on:click on:toggle on:keydown on:keyup />
-	{:else}
-		<slot />
-	{/if}
+	<slot />
 </div>
diff --git a/packages/skeleton/src/lib/components/TreeView/TreeViewDataDrivenItem.svelte b/packages/skeleton/src/lib/components/TreeView/TreeViewDataDrivenItem.svelte
deleted file mode 100644
index fea63fd8d3..0000000000
--- a/packages/skeleton/src/lib/components/TreeView/TreeViewDataDrivenItem.svelte
+++ /dev/null
@@ -1,119 +0,0 @@
-<script lang="ts">
-	/**
-	 * This component is only in Data-driven tree-view to add children recursively.
-	 */
-	import { getContext, onMount } from 'svelte';
-	import TreeViewDataDrivenItem from './TreeViewDataDrivenItem.svelte';
-	import TreeViewItem from './TreeViewItem.svelte';
-	import type { TreeViewNode } from './types.js';
-
-	// this can't be passed using context, since we have to pass it to recursive children.
-	/** Provide data-driven nodes. */
-	export let nodes: TreeViewNode[] = [];
-
-	// Context API
-	/** Enable tree-view selection */
-	export let selection: boolean = getContext('selection');
-	/** Enable selection of multiple items. */
-	export let multiple: boolean = getContext('multiple');
-
-	// Locals
-	let group: unknown;
-	let name = '';
-
-	// Lifecycle
-	onMount(() => {
-		// random number as name
-		name = String(Math.random());
-
-		if (selection) {
-			group = multiple ? [] : '';
-			// manage group (checking) on initialization.
-			if (multiple) {
-				nodes.forEach((node) => {
-					if (!Array.isArray(group)) return;
-					// handle relations
-					if (node.children && node.children.length > 0) {
-						// at least one child is indeterminate => indeterminate item
-						if (node.children.some((c) => c.indeterminate)) {
-							node.indeterminate = true;
-						}
-						// all children are checked => check item
-						else if (node.children.every((c) => c.checked)) {
-							node.indeterminate = false;
-							group.push(node.value);
-							group = group;
-						}
-						// not all children are checked => indeterminate item
-						else if (node.children.some((c) => c.checked)) {
-							node.indeterminate = true;
-						}
-						// all children are unchecked => uncheck item
-						else {
-							node.indeterminate = false;
-							node.checked = false;
-						}
-					} else if (node.checked) {
-						group.push(node.value);
-						group = group;
-					}
-				});
-				// single selection mode
-			} else {
-				nodes.forEach((node) => {
-					if (!node.checked) return;
-					group = node.value;
-				});
-			}
-		}
-	});
-
-	// Functionality
-	function onGroupChange() {
-		if (multiple) {
-			nodes.forEach((node) => {
-				if (!Array.isArray(group)) return;
-				node.checked = group.includes(node.value);
-			});
-		} else {
-			nodes.forEach((node) => {
-				node.checked = node.value === group;
-			});
-		}
-	}
-
-	// important to pass children up to items (recursively)
-	export let treeItems: TreeViewItem[] = [];
-	let children: TreeViewItem[][] = [];
-</script>
-
-{#if nodes && nodes.length > 0}
-	{#each nodes as node, i}
-		<TreeViewItem
-			bind:this={treeItems[i]}
-			bind:open={node.open}
-			hideLead={!node.lead}
-			hideChildren={!node.children || node.children.length === 0}
-			bind:disabled={node.disabled}
-			bind:group
-			bind:name
-			bind:indeterminate={node.indeterminate}
-			bind:value={node.value}
-			bind:children={children[i]}
-			on:change={onGroupChange}
-			on:change
-			on:click
-			on:toggle
-			on:keydown
-			on:keyup
-		>
-			{@html node.content}
-			<svelte:fragment slot="lead">
-				{@html node.lead}
-			</svelte:fragment>
-			<svelte:fragment slot="children">
-				<TreeViewDataDrivenItem bind:nodes={node.children} bind:treeItems={children[i]} />
-			</svelte:fragment>
-		</TreeViewItem>
-	{/each}
-{/if}
diff --git a/packages/skeleton/src/lib/components/TreeView/TreeViewItem.svelte b/packages/skeleton/src/lib/components/TreeView/TreeViewItem.svelte
index 0b925e0f74..f11b5223e6 100644
--- a/packages/skeleton/src/lib/components/TreeView/TreeViewItem.svelte
+++ b/packages/skeleton/src/lib/components/TreeView/TreeViewItem.svelte
@@ -7,7 +7,7 @@
 	 * @slot {{}} lead - Allows for an optional leading element, such as an icon.
 	 * @slot {{}} children - Provide TreeView item children.
 	 */
-	import { getContext, createEventDispatcher } from 'svelte';
+	import { getContext, createEventDispatcher, onMount } from 'svelte';
 
 	// Types
 	import type { CssClasses, SvelteEvent, TreeViewItem } from '../../index.js';
@@ -28,6 +28,8 @@
 	 * @type {unknown}
 	 */
 	export let value: unknown = undefined;
+	/** Set the input's check state */
+	export let checked = false;
 	/**
 	 * Provide children references to support relational checking.
 	 * @type {TreeViewItem[]}
@@ -78,7 +80,6 @@
 	export let hideChildren = false;
 
 	// Locals
-	let checked = false;
 	let treeItem: HTMLDetailsElement;
 	let childrenDiv: HTMLDivElement;
 
@@ -90,28 +91,54 @@
 	// Svelte Checkbox Bugfix
 	// GitHub: https://github.com/sveltejs/svelte/issues/2308
 	// REPL: https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
-	$: if (multiple) updateCheckbox(group);
-	$: if (multiple) updateGroup(checked);
-	function updateCheckbox(group: unknown) {
+	$: if (multiple) updateCheckbox(group, indeterminate);
+	$: if (multiple) updateGroup(checked, indeterminate);
+	$: if (!multiple) updateRadio(group);
+	$: if (!multiple) updateRadioGroup(checked);
+	let initUpdate = true;
+	function updateCheckbox(group: unknown, indeterminate: boolean) {
 		if (!Array.isArray(group)) return;
 		checked = group.indexOf(value) >= 0;
+		/** @event {{checked: boolean, indeterminate: boolean}} groupChange - Fires when the group changes */
+		dispatch('groupChange', { checked: checked, indeterminate: indeterminate });
+		dispatch('childChange');
+		// called only once when initializing to apply default checks
+		if (initUpdate) {
+			onParentChange();
+			initUpdate = false;
+		}
 	}
-	function updateGroup(checked: boolean) {
+	function updateGroup(checked: boolean, indeterminate: boolean) {
 		if (!Array.isArray(group)) return;
 		const index = group.indexOf(value);
 		if (checked) {
 			if (index < 0) {
 				group.push(value);
 				group = group;
+				// called only when the group changes
+				onParentChange();
 			}
 		} else {
 			if (index >= 0) {
 				group.splice(index, 1);
 				group = group;
+				// called only when the group changes
+				onParentChange();
 			}
 		}
 	}
 
+	function updateRadio(group: unknown) {
+		checked = group === value;
+		/** @event {{checked: boolean, indeterminate: boolean}} groupChange - Fires when the group changes */
+		dispatch('groupChange', { checked: checked, indeterminate: false });
+		if (group) dispatch('childChange');
+	}
+	function updateRadioGroup(checked: boolean) {
+		if (checked && group !== value) group = value;
+		else if (!checked && group === value) group = '';
+	}
+
 	// called when a child's value is changed
 	function onChildValueChange() {
 		if (multiple) {
@@ -123,6 +150,10 @@
 			// at least one child is indeterminate => indeterminate item
 			if (children.some((c) => c.indeterminate)) {
 				indeterminate = true;
+				if (index >= 0) {
+					group.splice(index, 1);
+					group = group;
+				}
 			}
 			// all children are checked => check item
 			else if (childrenValues.every((c) => Array.isArray(childrenGroup) && childrenGroup.includes(c))) {
@@ -135,6 +166,10 @@
 			// not all children are checked => indeterminate item
 			else if (childrenValues.some((c) => Array.isArray(childrenGroup) && childrenGroup.includes(c))) {
 				indeterminate = true;
+				if (index >= 0) {
+					group.splice(index, 1);
+					group = group;
+				}
 			}
 			// all children are unchecked => uncheck item
 			else {
@@ -147,13 +182,17 @@
 		}
 		// single selection mode
 		else {
-			if (group !== value) {
-				// check item
+			// one of the children is checked => check item
+			if (group !== value && children.some((c) => c.checked)) {
 				group = value;
+				// none of the children are checked => uncheck item
+			} else if (group === value && !children.some((c) => c.checked)) {
+				group = '';
 			}
 		}
 		// important to notify parent of item
-		dispatch('change');
+		/** @event childChange - Fires when the group of the child changes */
+		dispatch('childChange');
 	}
 
 	// used to update children of item when checked / unchecked in multiple mode
@@ -168,7 +207,6 @@
 			if (!child || !Array.isArray(child.group)) return;
 			child.indeterminate = false;
 			if (child.group.indexOf(child.value) < 0) {
-				// child.group = [...child.group, child.value] won't work here.
 				child.group.push(child.value);
 				child.group = child.group;
 			}
@@ -184,6 +222,7 @@
 		};
 
 		children.forEach((child) => {
+			if (!child) return;
 			// if parent is checked, check all children, else uncheck all children
 			index >= 0 ? checkChild(child) : uncheckChild(child);
 			// notify children to update values
@@ -192,11 +231,11 @@
 	}
 
 	// used to update children of item when checked / unchecked in single mode
-	$: if (!multiple && group) {
+	$: if (!multiple && group !== undefined) {
 		if (group !== value) {
 			// uncheck all children
 			children.forEach((child) => {
-				if (child) child.group = [];
+				if (child) child.group = '';
 			});
 		}
 	}
@@ -208,7 +247,7 @@
 
 	// whenever children are changed, reassign on:change events.
 	$: children.forEach((child) => {
-		if (child) child.$on('change', () => onChildValueChange());
+		if (child) child.$on('childChange', onChildValueChange);
 	});
 
 	// A11y Key Down Handler
@@ -337,12 +376,10 @@
 					{value}
 					bind:checked
 					bind:indeterminate
-					on:click
-					on:change
 					on:change={onParentChange}
 				/>
 			{:else}
-				<input class="radio tree-item-radio" type="radio" bind:group {name} {value} on:click on:change />
+				<input class="radio tree-item-radio" type="radio" bind:group {name} {value} />
 			{/if}
 		{/if}
 
diff --git a/packages/skeleton/src/lib/components/TreeView/types.ts b/packages/skeleton/src/lib/components/TreeView/types.ts
index 879b738cdc..f62dff7b22 100644
--- a/packages/skeleton/src/lib/components/TreeView/types.ts
+++ b/packages/skeleton/src/lib/components/TreeView/types.ts
@@ -1,18 +1,12 @@
 export interface TreeViewNode {
+	/** Nodes Unique ID */
+	id: string;
 	/** Main content. accepts HTML. */
 	content: string;
 	/** Lead content. accepts HTML. */
 	lead?: string;
-	/** Set open by default on load. */
-	open?: boolean;
-	/** Set the tree disabled state. */
-	disabled?: boolean;
 	/** children nodes. */
 	children?: TreeViewNode[];
 	/** Set the input's value. */
 	value?: unknown;
-	/** input checked */
-	checked?: boolean;
-	/** input is set to indeterminate, only availabe in multiple selection mode. */
-	indeterminate?: boolean;
 }
diff --git a/packages/skeleton/src/lib/index.ts b/packages/skeleton/src/lib/index.ts
index ec662e29e9..a9eecdd6e7 100644
--- a/packages/skeleton/src/lib/index.ts
+++ b/packages/skeleton/src/lib/index.ts
@@ -87,7 +87,8 @@ export { default as Tab } from './components/Tab/Tab.svelte';
 export { default as TabAnchor } from './components/Tab/TabAnchor.svelte';
 export { default as TreeView } from './components/TreeView/TreeView.svelte';
 export { default as TreeViewItem } from './components/TreeView/TreeViewItem.svelte';
-export { default as TreeViewDataDrivenItem } from './components/TreeView/TreeViewDataDrivenItem.svelte';
+export { default as RecursiveTreeView } from './components/TreeView/RecursiveTreeView.svelte';
+export { default as RecursiveTreeViewItem } from './components/TreeView/RecursiveTreeViewItem.svelte';
 // Utility Components
 export { default as CodeBlock } from './utilities/CodeBlock/CodeBlock.svelte';
 export { default as Modal } from './utilities/Modal/Modal.svelte';
diff --git a/sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte
index 5c54405eb1..4ca8ad6668 100644
--- a/sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte
@@ -3,19 +3,21 @@
 	import { DocsFeature, type DocsShellSettings } from '$lib/layouts/DocsShell/types';
 	import DocsPreview from '$lib/components/DocsPreview/DocsPreview.svelte';
 	// Components
-	import { TreeView, TreeViewItem, type TreeViewNode } from '@skeletonlabs/skeleton';
+	import { TreeView, TreeViewItem, RecursiveTreeView } from '@skeletonlabs/skeleton';
 	// Utilities
 	import { CodeBlock } from '@skeletonlabs/skeleton';
 	// Sveld
 	import sveldTreeView from '@skeletonlabs/skeleton/components/TreeView/TreeView.svelte?raw&sveld';
 	import sveldTreeViewItem from '@skeletonlabs/skeleton/components/TreeView/TreeViewItem.svelte?raw&sveld';
+	import sveldRecursiveTreeView from '@skeletonlabs/skeleton/components/TreeView/RecursiveTreeView.svelte?raw&sveld';
+	import { nodes } from './exampleData';
 
 	// Docs Shell
 	const settings: DocsShellSettings = {
 		feature: DocsFeature.Component,
 		name: 'Tree Views',
 		description: 'Display information in a hierarchical structure using collapsible nodes.',
-		imports: ['TreeView', 'TreeViewItem', 'type TreeViewNode'],
+		imports: ['TreeView', 'TreeViewItem', 'RecursiveTreeView', 'type TreeViewNode'],
 		source: 'packages/skeleton/src/lib/components/TreeView',
 		aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/treeview/',
 		components: [
@@ -38,7 +40,8 @@
 					'regionSymbol',
 					'regionChildren'
 				]
-			}
+			},
+			{ label: 'RecursiveTreeView', sveld: sveldRecursiveTreeView }
 		],
 		keyboard: [
 			['<kbd class="kbd">Tab</kbd>', "Focus the next tree-view item or it's input."],
@@ -67,94 +70,11 @@
 
 	let expandTree: TreeView;
 
-	let simpleDD: TreeViewNode[] = [
-		{
-			content: 'Books',
-			lead: '<i class="fa-solid fa-book-skull"></i>',
-			open: true,
-			children: [
-				{ content: 'Clean Code', value: 'Clean Code' },
-				{ content: 'The Clean Coder', value: 'The Clean Coder' },
-				{ content: 'The Art of Unix Programming', value: 'The Art of Unix Programming' }
-			],
-			value: 'books'
-		},
-		{
-			content: 'Movies',
-			lead: '<i class="fa-solid fa-film"></i>',
-			children: [
-				{ content: 'The Flash', value: 'The Flash' },
-				{ content: 'Guardians of the Galaxy', value: 'Guardians of the Galaxy' },
-				{ content: 'Black Panther', value: 'Black Panther' }
-			],
-			value: 'movies'
-		},
-		{
-			content: 'TV',
-			lead: '<i class="fa-solid fa-tv"></i>',
-			value: 'tv'
-		}
-	];
-
-	let singleDD: TreeViewNode[] = [
-		{
-			content: 'Books',
-			lead: '<i class="fa-solid fa-book-skull"></i>',
-			open: true,
-			checked: true,
-			children: [
-				{ content: 'Clean Code', value: 'Clean Code' },
-				{ content: 'The Clean Coder', value: 'The Clean Coder' },
-				{ content: 'The Art of Unix Programming', value: 'The Art of Unix Programming', checked: true }
-			],
-			value: 'books'
-		},
-		{
-			content: 'Movies',
-			lead: '<i class="fa-solid fa-film"></i>',
-			children: [
-				{ content: 'The Flash', value: 'The Flash' },
-				{ content: 'Guardians of the Galaxy', value: 'Guardians of the Galaxy' },
-				{ content: 'Black Panther', value: 'Black Panther' }
-			],
-			value: 'movies'
-		},
-		{
-			content: 'TV',
-			lead: '<i class="fa-solid fa-tv"></i>',
-			value: 'tv'
-		}
-	];
-
-	let multipleDD: TreeViewNode[] = [
-		{
-			content: 'Books',
-			lead: '<i class="fa-solid fa-book-skull"></i>',
-			open: true,
-			indeterminate: true,
-			children: [
-				{ content: 'Clean Code', value: 'Clean Code' },
-				{ content: 'The Clean Coder', value: 'The Clean Coder', checked: true },
-				{ content: 'The Art of Unix Programming', value: 'The Art of Unix Programming', checked: true }
-			],
-			value: 'books'
-		},
-		{
-			content: 'Movies',
-			lead: '<i class="fa-solid fa-film"></i>',
-			children: [
-				{ content: 'The Flash', value: 'The Flash' },
-				{ content: 'Guardians of the Galaxy', value: 'Guardians of the Galaxy' },
-				{ content: 'Black Panther', value: 'Black Panther' }
-			],
-			value: 'movies'
-		},
-		{
-			content: 'TV',
-			lead: '<i class="fa-solid fa-tv"></i>',
-			value: 'tv'
-		}
-	];
+	let expandedNodes: string[] = [];
+	let disabledNodes: string[] = ['programming'];
+	let singleCheckedNodes: string[] = [];
+	let multiCheckedNodes: string[] = ['javascript'];
+	let indeterminateNodes: string[] = [];
 </script>
 
 <DocsShell {settings}>
@@ -734,24 +654,25 @@ let booksChildren: TreeViewItem[] = [];
 		<!-- Recursive Mode -->
 		<section class="space-y-4">
 			<h2 class="h2">Recursive Mode</h2>
-			<p>Tree views can be generated using a recursive data-driven method.</p>
+			<p>
+				Tree views can be generated with a recursive data-driven method using the <code class="code">RecursiveTreeView</code> components.
+			</p>
 			<DocsPreview background="neutral" regionFooter="flex justify-center gap-4">
 				<svelte:fragment slot="preview">
-					<TreeView bind:nodes={simpleDD} />
+					<RecursiveTreeView {nodes} />
 				</svelte:fragment>
 				<svelte:fragment slot="source">
+					<p>To get expected results make sure to include a <em>unique Id</em> for each node.</p>
 					<CodeBlock
 						language="ts"
 						code={`
 let myTreeViewNodes: TreeViewNode[] = [
 	{
-		content: 'Books',
+		id: 'unique-id'
+		content: 'content',
 		lead: '(icon)',
-		open: true,
 		children: [
-			{ content: 'Clean Code' },
-			{ content: 'The Clean Coder' },
-			{ content: 'The Art of Unix Programming' },
+			//...
 		]
 	},
 	// ...
@@ -761,83 +682,140 @@ let myTreeViewNodes: TreeViewNode[] = [
 					<CodeBlock
 						language="html"
 						code={`
-<TreeView nodes={myTreeViewNodes}/>
+<RecursiveTreeView nodes={nodes} />
 						`}
 					/>
 				</svelte:fragment>
 			</DocsPreview>
-			<!-- Single Selection -->
-			<h3 class="h3">Single Selection</h3>
+			<!-- Expanded -->
+			<h3 class="h3">Expanded</h3>
 			<!-- prettier-ignore -->
 			<p>
-				Relational checking is automatically applied when generating your list in a recursive manner. Setting a child as <code class="code">checked</code> will not automatically affect the parent.
+				To access and modify the expanded nodes use <code class="code">expandedNodes</code> array prop.
 			</p>
 			<DocsPreview background="neutral" regionFooter="flex justify-center gap-4">
 				<svelte:fragment slot="preview">
-					<TreeView bind:nodes={singleDD} selection />
+					<RecursiveTreeView {nodes} bind:expandedNodes />
 				</svelte:fragment>
 				<svelte:fragment slot="source">
 					<CodeBlock
 						language="ts"
 						code={`
-let myTreeViewNodes: TreeViewNode[] = [
-	{
-		content: 'Books',
-		lead: '(icon)',
-		open: true,
-		checked: true,
-		children: [
-			{ content: 'Clean Code' },
-			{ content: 'The Clean Coder' },
-			{ content: 'The Art of Unix Programming', checked: true },
-		]
-	},
-	// ...
-]
+let myTreeViewNodes: TreeViewNode[] = //...
+let expandedNodes : string[] = [];
 						`}
 					/>
 					<CodeBlock
 						language="html"
 						code={`
-<TreeView bind:nodes={myTreeViewNodes} selection/>
+<RecursiveTreeView nodes={nodes} bind:expandedNodes={expandedNodes} />
 						`}
 					/>
 				</svelte:fragment>
+				<svelte:fragment slot="footer">
+					<span>Expanded nodes: <code class="code">{expandedNodes}</code></span>
+				</svelte:fragment>
 			</DocsPreview>
-			<!-- Multiple Selection -->
-			<h3 class="h3">Multiple Selection</h3>
-			<p>Relational checking is automatically applied when generating your list in a recursive manner.</p>
+			<!-- Disabled -->
+			<h3 class="h3">Disabled</h3>
+			<!-- prettier-ignore -->
+			<p>
+				To access and modify the disabled nodes use <code class="code">disabledNodes</code> array prop.
+			</p>
 			<DocsPreview background="neutral" regionFooter="flex justify-center gap-4">
 				<svelte:fragment slot="preview">
-					<TreeView bind:nodes={multipleDD} selection multiple />
+					<RecursiveTreeView {nodes} bind:disabledNodes />
 				</svelte:fragment>
 				<svelte:fragment slot="source">
 					<CodeBlock
 						language="ts"
 						code={`
-let myTreeViewNodes: TreeViewNode[] = [
-	{
-		content: 'Books',
-		lead: '(icon)',
-		open: true,
-		indeterminate: true,
-		children: [
-			{ content: 'Clean Code' },
-			{ content: 'The Clean Coder', checked: true },
-			{ content: 'The Art of Unix Programming', checked: true },
-		]
-	},
-	// ...
-]
+let myTreeViewNodes: TreeViewNode[] = //...
+let disabledNodes : string[] = [];
+						`}
+					/>
+					<CodeBlock
+						language="html"
+						code={`
+<RecursiveTreeView nodes={nodes} bind:disabledNodes={disabledNodes} />
+						`}
+					/>
+				</svelte:fragment>
+				<svelte:fragment slot="footer">
+					<span>Disabled nodes: <code class="code">{disabledNodes}</code></span>
+				</svelte:fragment>
+			</DocsPreview>
+			<!-- Selection -->
+			<h3 class="h3">Selection</h3>
+			<!-- prettier-ignore -->
+			<p>
+				Just like normal Tree-view, Recursive Tree-view supports selection with both <em>single</em> and <em>multiple</em> modes.
+			</p>
+			<p>To access and modify the checked nodes use <code class="code">checkedNodes</code> array prop.</p>
+			<DocsPreview background="neutral" regionFooter="flex justify-center gap-4">
+				<svelte:fragment slot="preview">
+					<RecursiveTreeView selection {nodes} bind:checkedNodes={singleCheckedNodes} />
+				</svelte:fragment>
+				<svelte:fragment slot="source">
+					<CodeBlock
+						language="ts"
+						code={`
+let myTreeViewNodes: TreeViewNode[] = //...
+let checkedNodes : string[] = [];
+						`}
+					/>
+					<CodeBlock
+						language="html"
+						code={`
+<RecursiveTreeView selection nodes={nodes} bind:checkedNodes={checkedNodes} />
+						`}
+					/>
+				</svelte:fragment>
+				<svelte:fragment slot="footer">
+					<span>checked nodes: <code class="code">{singleCheckedNodes}</code></span>
+				</svelte:fragment>
+			</DocsPreview>
+
+			<!-- Relational Selection -->
+			<h3 class="h3">Relational Selection</h3>
+			<!-- prettier-ignore -->
+			<p>
+				Just like normal Tree-view, Recursive Tree-view supports relational selection using the prop <code class="code">relational</code>.
+			</p>
+			<p>To access and modify the checked nodes use <code class="code">checkedNodes</code> array prop.</p>
+			<p>
+				In multiple relational selection mode, an extra array prop <code class="code">indeterminateNodes</code> is available to indicate indeterminate
+				nodes.
+			</p>
+			<DocsPreview background="neutral" regionFooter="flex justify-center gap-4">
+				<svelte:fragment slot="preview">
+					<RecursiveTreeView selection multiple relational {nodes} bind:checkedNodes={multiCheckedNodes} bind:indeterminateNodes />
+				</svelte:fragment>
+				<svelte:fragment slot="source">
+					<CodeBlock
+						language="ts"
+						code={`
+let myTreeViewNodes: TreeViewNode[] = //...
+let checkedNodes : string[] = [];
+let indeterminateNodes : string[] = [];
 						`}
 					/>
 					<CodeBlock
 						language="html"
 						code={`
-<TreeView bind:nodes={myTreeViewNodes} selection multiple/>
+<RecursiveTreeView 
+	selection 
+	multiple 
+	relational 
+	nodes={nodes} 
+	bind:checkedNodes={checkedNodes} 
+	bind:indeterminateNodes={indeterminateNodes}/>
 						`}
 					/>
 				</svelte:fragment>
+				<svelte:fragment slot="footer">
+					<span>indeterminate nodes: <code class="code whitespace-normal">{indeterminateNodes}</code></span>
+				</svelte:fragment>
 			</DocsPreview>
 		</section>
 	</svelte:fragment>
diff --git a/sites/skeleton.dev/src/routes/(inner)/components/tree-views/exampleData.ts b/sites/skeleton.dev/src/routes/(inner)/components/tree-views/exampleData.ts
new file mode 100644
index 0000000000..c99c8a596f
--- /dev/null
+++ b/sites/skeleton.dev/src/routes/(inner)/components/tree-views/exampleData.ts
@@ -0,0 +1,223 @@
+import type { TreeViewNode } from '@skeletonlabs/skeleton';
+
+export const nodes: TreeViewNode[] = [
+	{
+		id: 'programming',
+		content: 'programming',
+		value: 'programming',
+		children: [
+			{
+				id: 'language',
+				content: 'language',
+				value: 'language',
+				children: [
+					{
+						id: 'javascript',
+						content: 'javascript',
+						value: 'javascript'
+					},
+					{
+						id: 'c#',
+						content: 'c#',
+						value: 'c#'
+					},
+					{
+						id: 'rust',
+						content: 'rust',
+						value: 'rust'
+					}
+				]
+			},
+			{
+				content: 'database',
+				value: 'database',
+				id: 'database',
+				children: [
+					{
+						id: 'mongodb',
+						content: 'mongodb',
+						value: 'mongodb'
+					},
+					{
+						id: 'mssql',
+						content: 'mssql',
+						value: 'mssql'
+					},
+					{
+						id: 'casandra',
+						content: 'casandra',
+						value: 'casandra'
+					}
+				]
+			},
+			{
+				content: 'framework',
+				value: 'framework',
+				id: 'framework',
+				children: [
+					{
+						id: 'svelte',
+						content: 'svelte',
+						value: 'svelte'
+					},
+					{
+						id: 'angular',
+						content: 'angular',
+						value: 'angular'
+					},
+					{
+						id: 'react',
+						content: 'react',
+						value: 'react'
+					}
+				]
+			}
+		]
+	},
+	{
+		content: 'books',
+		value: 'books',
+		id: 'books',
+		children: [
+			{
+				id: 'clean code',
+				content: 'clean code',
+				value: 'clean code',
+				children: [
+					{
+						id: 'clean code - section 1',
+						content: 'clean code - section 1',
+						value: 'clean code - section 1'
+					},
+					{
+						id: 'clean code - section 2',
+						content: 'clean code - section 2',
+						value: 'clean code - section 2'
+					},
+					{
+						id: 'clean code - section 3',
+						content: 'clean code - section 3',
+						value: 'clean code - section 3'
+					}
+				]
+			},
+			{
+				id: 'structure',
+				content: 'structure',
+				value: 'structure',
+				children: [
+					{
+						id: 'structure - section 1',
+						content: 'structure - section 1',
+						value: 'structure - section 1'
+					},
+					{
+						id: 'structure - section 2',
+						content: 'structure - section 2',
+						value: 'structure - section 2'
+					},
+					{
+						id: 'structure - section 3',
+						content: 'structure - section 3',
+						value: 'structure - section 3'
+					}
+				]
+			},
+			{
+				id: 'clean coder',
+				content: 'clean coder',
+				value: 'clean coder',
+				children: [
+					{
+						id: 'clean coder - section 1',
+						content: 'clean coder - section 1',
+						value: 'clean coder - section 1'
+					},
+					{
+						id: 'clean coder - section 2',
+						content: 'clean coder - section 2',
+						value: 'clean coder - section 2'
+					},
+					{
+						id: 'clean coder - section 3',
+						content: 'clean coder - section 3',
+						value: 'clean coder - section 3'
+					}
+				]
+			}
+		]
+	},
+	{
+		id: 'series',
+		content: 'series',
+		value: 'series',
+		children: [
+			{
+				id: 'Mr. Robot',
+				content: 'Mr. Robot',
+				value: 'Mr. Robot',
+				children: [
+					{
+						id: 'Mr. Robot - season 1',
+						content: 'Mr. Robot - season 1',
+						value: 'Mr. Robot - season 1'
+					},
+					{
+						id: 'Mr. Robot - season 2',
+						content: 'Mr. Robot - season 2',
+						value: 'Mr. Robot - season 2'
+					},
+					{
+						id: 'Mr. Robot - season 3',
+						content: 'Mr. Robot - season 3',
+						value: 'Mr. Robot - season 3'
+					}
+				]
+			},
+			{
+				id: 'silicon valley',
+				content: 'silicon valley',
+				value: 'silicon valley',
+				children: [
+					{
+						id: 'silicon valley - season 1',
+						content: 'silicon valley - season 1',
+						value: 'silicon valley - season 1'
+					},
+					{
+						id: 'silicon valley - season 2',
+						content: 'silicon valley - season 2',
+						value: 'silicon valley - season 2'
+					},
+					{
+						id: 'silicon valley - season 3',
+						content: 'silicon valley - season 3',
+						value: 'silicon valley - season 3'
+					}
+				]
+			},
+			{
+				id: 'code monkeys',
+				content: 'code monkeys',
+				value: 'code monkeys',
+				children: [
+					{
+						id: 'code monkeys - season 1',
+						content: 'code monkeys - season 1',
+						value: 'code monkeys - season 1'
+					},
+					{
+						id: 'code monkeys - season 2',
+						content: 'code monkeys - season 2',
+						value: 'code monkeys - season 2'
+					},
+					{
+						id: 'code monkeys - season 3',
+						content: 'code monkeys - season 3',
+						value: 'code monkeys - season 3'
+					}
+				]
+			}
+		]
+	}
+];