diff --git a/src/lib/components/TreeList.svelte b/src/lib/components/TreeList.svelte
index 8f22c9b3e..e820e78d7 100644
--- a/src/lib/components/TreeList.svelte
+++ b/src/lib/components/TreeList.svelte
@@ -2,10 +2,22 @@
   import { cls } from '$lib/utils/styles';
   import { getComponentTheme } from './theme';
 
+
   type Node = { id: number; name: string; level: number; children: Node[] };
 
+  /**
+   * An array of nodes containing custom metadata and an array of child nodes
+   * @param {Array} nodes - An array of Node Objects each containing a children: Node[] attribute.
+   * Example: type Node = { name: string; children: Node[] }
+   */
   export let nodes: Node[];
 
+  /**
+   * Allows for conditional classes to be applied to each tag <ul> and <li>
+   * @param {Object} classes - An object containing optional classes for <ul> and <li> tags.
+   * @param {string|Function} classes.ul - A string or function that returns a string of classes to be applied to each <ul> tag.
+   * @param {string|Function} classes.li - A string or function that returns a string of classes to be applied to each <li> tag.
+   */
   export let classes: {
     ul?: string | ((nodes: Node[]) => string);
     li?: string | ((node: Node) => string);
diff --git a/src/routes/docs/components/TreeList/+page.svelte b/src/routes/docs/components/TreeList/+page.svelte
index ffe2c203f..e4635a937 100644
--- a/src/routes/docs/components/TreeList/+page.svelte
+++ b/src/routes/docs/components/TreeList/+page.svelte
@@ -2,8 +2,77 @@
   import TreeList from '$lib/components/TreeList.svelte';
   import Preview from '$lib/components/Preview.svelte';
   import Blockquote from '$docs/Blockquote.svelte';
-</script>
+    import Icon from '$lib/components/Icon.svelte';
+    import { mdiCircleSmall } from '@mdi/js';
+    import { cls } from '$lib';
+
+  type Node = { name: string; level: number; children: Node[] };
 
+
+  let nodes: Node[] = [
+    {
+      name: 'Node 1',
+      level: 1,
+      children: [
+        {
+          name: 'Node 1.1',
+          level: 2,
+          children: [
+            {
+              name: 'Node 1.1.1',
+              level: 3,
+              children: []
+            },
+            {
+              name: 'Node 1.1.2',
+              level: 3,
+              children: []
+            }
+          ]
+        },
+        {
+          name: 'Node 1.2',
+          level: 2,
+          children: []
+        }
+      ]
+    },
+    {
+      name: 'Node 2',
+      level: 1,
+      children: [
+        {
+          name: 'Node 2.1',
+          level: 2,
+          children: []
+        }
+      ]
+    }
+  ];
+</script>
 <h1>Examples</h1>
 
-<Blockquote>TODO</Blockquote>
+Wer're going to use a TreeList to render the following tree using &lt;ul&gt; and &lt;li&gt;:
+<br><br>
+
+<Preview language="typescript" code="{"type Node = { name: string; level: number; children: Node[] };\n\nconst nodes =" + JSON.stringify(nodes, null, 2)}">
+<pre>
+  type Node = &lbrace; name: string; level: number; children: Node[] &rbrace;;
+  const nodes = {JSON.stringify(nodes, null, 2).slice(0, 300)}...
+</pre>
+</Preview>
+
+<br><br>
+
+<Preview>
+  <TreeList nodes="{nodes}" let:node
+  classes={{ li: (node) => cls(node.level === 1 ? 'mb-2' : node.level > 2 ? 'ml-3' : '') }}
+  >
+    <slot {node}>
+      {#if node.level > 1}
+      <Icon path={mdiCircleSmall} class="-mx-1 text-black/30" />
+    {/if}
+        {@html node.name}
+    </slot>
+  </TreeList>
+</Preview>