diff --git a/examples/router-demo.ds b/examples/router-demo.ds
new file mode 100644
index 0000000..0db5b76
--- /dev/null
+++ b/examples/router-demo.ds
@@ -0,0 +1,81 @@
+-- DreamStack Multi-Page App
+-- Client-side routing with hash navigation
+
+import { Card } from "../registry/components/card"
+import { Badge } from "../registry/components/badge"
+
+let count = 0
+let todos = ["Buy groceries", "Walk the dog"]
+let newTodo = ""
+
+-- Navigation bar (shared across all routes)
+view nav = row [
+  text "🧭 MyApp" { variant: "title" }
+  button "🏠 Home" { click: navigate "/", variant: "primary" }
+  button "🔢 Counter" { click: navigate "/counter", variant: "secondary" }
+  button "📝 Todos" { click: navigate "/todos", variant: "secondary" }
+  button "ℹ️ About" { click: navigate "/about", variant: "ghost" }
+]
+
+-- Route: Home
+route "/" -> column [
+  text "🏠 Welcome Home" { variant: "title" }
+  text "Navigate using the buttons above" { variant: "subtitle" }
+  row [
+    Card { title: "Counter", subtitle: "reactive state" } [
+      text "Count: {count}" { variant: "title" }
+      Badge { label: "LIVE", variant: "success" }
+    ]
+    Card { title: "Todos", subtitle: "dynamic lists" } [
+      Badge { label: "ACTIVE", variant: "info" }
+    ]
+  ]
+]
+
+-- Route: Counter
+route "/counter" -> column [
+  text "🔢 Counter Page" { variant: "title" }
+  text "State persists across route changes" { variant: "subtitle" }
+  Card { title: "Interactive Counter", subtitle: "reactive signals" } [
+    text "Count: {count}" { variant: "title" }
+    row [
+      button "+1" { click: count += 1, variant: "primary" }
+      button "-1" { click: count -= 1, variant: "secondary" }
+      button "Reset" { click: count = 0, variant: "ghost" }
+    ]
+    when count > 10 -> Badge { label: "HIGH SCORE!", variant: "warning" }
+  ]
+]
+
+-- Route: Todos
+route "/todos" -> column [
+  text "📝 Todo List" { variant: "title" }
+  text "Add and remove tasks" { variant: "subtitle" }
+  Card { title: "My Tasks", subtitle: "dynamic arrays" } [
+    row [
+      input { bind: newTodo, placeholder: "New task..." }
+      button "Add" { click: todos.push(newTodo), variant: "primary" }
+    ]
+    each todo in todos ->
+      row [
+        text "→ {todo}"
+        button "×" { click: todos.remove(_idx), variant: "ghost" }
+      ]
+    button "Clear All" { click: todos = [], variant: "ghost" }
+  ]
+]
+
+-- Route: About
+route "/about" -> column [
+  text "ℹ️ About DreamStack" { variant: "title" }
+  text "The reactive UI language" { variant: "subtitle" }
+  Card { title: "Features", subtitle: "all built-in" } [
+    text "• Reactive signals with fine-grained updates"
+    text "• Component composition with slots"
+    text "• Client-side routing (you're using it now!)"
+    text "• Dynamic lists with push/remove"
+    text "• Pattern matching expressions"
+    text "• When/else branching"
+    text "• Two-way data binding"
+  ]
+]