diff --git a/examples/basic/components/accordion/docs.mdx b/examples/basic/components/accordion/docs.mdx
new file mode 100644
index 0000000..2f96977
--- /dev/null
+++ b/examples/basic/components/accordion/docs.mdx
@@ -0,0 +1,8 @@
+---
+title: 'Accordion'
+description: 'UI component named after a funky instrument 🪗'
+path: 'Content/Accordion'
+---
+import {Accordion} from '.'
+
+<Accordion/>
\ No newline at end of file
diff --git a/examples/basic/components/accordion/index.tsx b/examples/basic/components/accordion/index.tsx
new file mode 100644
index 0000000..dbb5e9d
--- /dev/null
+++ b/examples/basic/components/accordion/index.tsx
@@ -0,0 +1,15 @@
+import { ReactElement } from 'react'
+
+interface AccordionProps {
+ color?: string
+ children: ReactElement
+}
+
+export function Accordion({ children }: AccordionProps) {
+ return (
+  <details>
+   <summary>Hello 👋</summary>
+   Nice meeting you! How's everything going?
+  </details>
+ )
+}
diff --git a/packages/swingset/src/get-navigation-tree.ts b/packages/swingset/src/get-navigation-tree.ts
index 7457ef3..9c2579b 100644
--- a/packages/swingset/src/get-navigation-tree.ts
+++ b/packages/swingset/src/get-navigation-tree.ts
@@ -4,6 +4,7 @@ import {
   ComponentNode,
   CategoryNode,
   NavigationTree,
+  NavigationNode,
 } from './types.js'
 
 export function getNavigationTree(
@@ -83,5 +84,37 @@ export function getNavigationTree(
   }
 
   const tree = Array.from(categories.values())
+
+  deepSort(tree)
+
   return tree
 }
+
+/**
+ *
+ * Sorts tree alphabetically
+ */
+function deepSort(nodes: (CategoryNode | NavigationNode)[]) {
+  nodes.sort(compareTitleSort)
+
+  for (const node of nodes) {
+    const hasChildren = 'children' in node
+
+    if (hasChildren) {
+      deepSort(node.children)
+    }
+  }
+}
+
+function compareTitleSort<T extends CategoryNode | NavigationNode>(
+  a: T,
+  b: T
+): -1 | 0 | 1 {
+  if (a.title > b.title) {
+    return 1
+  }
+  if (b.title > a.title) {
+    return -1
+  }
+  return 0
+}