diff --git a/examples/component-gallery.ds b/examples/component-gallery.ds
new file mode 100644
index 0000000..f032893
--- /dev/null
+++ b/examples/component-gallery.ds
@@ -0,0 +1,117 @@
+-- DreamStack Component Gallery
+-- Comprehensive showcase of all 14 registry components
+-- Demonstrates: imports, slots, when/else, match, reactive state, every timer
+
+import { Card } from "../registry/components/card"
+import { Badge } from "../registry/components/badge"
+import { Button } from "../registry/components/button"
+import { Progress } from "../registry/components/progress"
+import { Alert } from "../registry/components/alert"
+import { Input } from "../registry/components/input"
+import { Toggle } from "../registry/components/toggle"
+import { Avatar } from "../registry/components/avatar"
+import { Stat } from "../registry/components/stat"
+import { Separator } from "../registry/components/separator"
+import { Toast } from "../registry/components/toast"
+
+-- State
+let count = 0
+let name = ""
+let darkMode = false
+let loggedIn = false
+let mood = "neutral"
+let progress = 25
+let showToast = false
+let ticks = 0
+
+-- Timer
+every 1000 -> ticks += 1
+
+view gallery = column [
+
+  -- Header
+  text "🧩 Component Gallery" { variant: "title" }
+  text "14 components • DreamStack Registry" { variant: "subtitle" }
+
+  Separator { label: "Interactive" }
+
+  -- 1. Card + Button + Counter
+  Card { title: "Counter", subtitle: "Card + Button + slots" } [
+    text "Count: {count}" { variant: "title" }
+    row [
+      Button { label: "−1", variant: "secondary", onClick: count -= 1 }
+      Button { label: "+1", variant: "primary", onClick: count += 1 }
+      Button { label: "Reset", variant: "ghost", onClick: count = 0 }
+    ]
+  ]
+
+  -- 2. Input + Alert
+  Card { title: "Form", subtitle: "Input + Alert components" } [
+    Input { value: name, placeholder: "Type your name...", label: "Name" }
+    when name ->
+      Alert { message: "Hello, {name}! 👋", variant: "success" }
+  ]
+
+  -- 3. Progress
+  Card { title: "Progress", subtitle: "Progress bar with controls" } [
+    Progress { value: progress, label: "Loading" }
+    row [
+      Button { label: "−10", variant: "secondary", onClick: progress -= 10 }
+      Button { label: "+10", variant: "primary", onClick: progress += 10 }
+      Button { label: "Full", variant: "ghost", onClick: progress = 100 }
+    ]
+  ]
+
+  Separator { label: "Status" }
+
+  -- 4. Badge + When/Else
+  Card { title: "Auth", subtitle: "Badge + when/else" } [
+    Button { label: "Toggle Login", variant: "primary", onClick: loggedIn = !loggedIn }
+    when loggedIn ->
+      row [
+        Badge { label: "ONLINE", variant: "success" }
+        text "Welcome back!"
+      ]
+    else ->
+      row [
+        Badge { label: "OFFLINE", variant: "error" }
+        text "Please log in"
+      ]
+  ]
+
+  -- 5. Match + Mood
+  Card { title: "Mood", subtitle: "match expressions" } [
+    row [
+      Button { label: "😊 Happy", variant: "primary", onClick: mood = "happy" }
+      Button { label: "😢 Sad", variant: "secondary", onClick: mood = "sad" }
+      Button { label: "😡 Angry", variant: "ghost", onClick: mood = "angry" }
+    ]
+    match mood
+      "happy" -> text "You're feeling great! 🌟"
+      "sad" -> text "Hang in there... 💙"
+      "angry" -> text "Take a deep breath 🔥"
+      _ -> text "How are you feeling?"
+  ]
+
+  Separator { label: "Display" }
+
+  -- 6. Stat cards
+  row [
+    Stat { label: "Uptime", value: "{ticks}s", change: "+1/s" }
+    Stat { label: "Clicks", value: "{count}", change: "total" }
+    Stat { label: "Progress", value: "{progress}%", change: "current" }
+  ]
+
+  -- 7. Avatar + Toggle
+  Card { title: "Settings" } [
+    row [
+      Avatar { initials: "DS" }
+      text "DreamStack User"
+    ]
+    Toggle { value: darkMode, label: "Dark Mode", onChange: darkMode = !darkMode }
+    Toggle { value: showToast, label: "Show Toast", onChange: showToast = !showToast }
+  ]
+
+  -- 8. Toast
+  Toast { message: "Hello from DreamStack! 🚀", variant: "success", visible: showToast }
+]
diff --git a/registry/components/alert.ds b/registry/components/alert.ds
index c078d1e..31edcb8 100644
--- a/registry/components/alert.ds
+++ b/registry/components/alert.ds
@@ -1,5 +1,11 @@
 -- DreamStack Alert Component
+-- Dismissable alert with icon and variant support
 -- Variants: info, warning, error, success
 
-export component Alert(message, variant) =
-  text message { variant: "info" }
+export component Alert(message, variant, title) =
+  column [
+    row [
+      text message
+    ]
+    slot
+  ] { variant: variant }
diff --git a/registry/components/avatar.ds b/registry/components/avatar.ds
index a846e47..a0f7daa 100644
--- a/registry/components/avatar.ds
+++ b/registry/components/avatar.ds
@@ -1,5 +1,5 @@
 -- DreamStack Avatar Component
--- User avatar with initials fallback
+-- User avatar with initials and size variant
 
-export component Avatar(initials) =
-  text initials
+export component Avatar(initials, size) =
+  text initials { variant: "avatar" }
diff --git a/registry/components/badge.ds b/registry/components/badge.ds
index e932fc5..d46416e 100644
--- a/registry/components/badge.ds
+++ b/registry/components/badge.ds
@@ -1,5 +1,5 @@
 -- DreamStack Badge Component
--- Small label with colored background
+-- Status indicator with colored background
 -- Variants: success, warning, error, info, default
 
 export component Badge(label, variant) =
diff --git a/registry/components/button.ds b/registry/components/button.ds
index 3e547bd..d602256 100644
--- a/registry/components/button.ds
+++ b/registry/components/button.ds
@@ -1,5 +1,5 @@
 -- DreamStack Button Component
--- Variants: primary (default), secondary, ghost, destructive
+-- Variants: primary (default), secondary, ghost, destructive, outline
 
-export component Button(label, variant, onClick) =
-  button label { click: onClick, variant: "primary" }
+export component Button(label, variant, onClick, disabled) =
+  button label { click: onClick, variant: variant, disabled: disabled }
diff --git a/registry/components/card.ds b/registry/components/card.ds
index 93fa426..2fa5722 100644
--- a/registry/components/card.ds
+++ b/registry/components/card.ds
@@ -1,9 +1,10 @@
 -- DreamStack Card Component with Slot
 -- Glassmorphism container with title, subtitle, and slot for children
 
-export component Card(title, subtitle) =
+export component Card(title, subtitle, footer) =
   column [
-    text title { variant: "title" }
-    text subtitle { variant: "subtitle" }
+    when title -> text title { variant: "title" }
+    when subtitle -> text subtitle { variant: "subtitle" }
     slot
+    when footer -> text footer { variant: "subtitle" }
   ] { variant: "card" }
diff --git a/registry/components/dialog.ds b/registry/components/dialog.ds
index 9b2e40c..b0139d0 100644
--- a/registry/components/dialog.ds
+++ b/registry/components/dialog.ds
@@ -1,10 +1,16 @@
 -- DreamStack Dialog Component
--- Modal with overlay, title, and close button
+-- Modal with overlay, title, slot content, and close button
 
 import { Button } from "./button"
 
 export component Dialog(title, open, onClose) =
-  column [
-    text title { variant: "title" }
-    Button { label: "Close", onClick: onClose }
-  ] { variant: "dialog" }
+  when open ->
+    column [
+      column [
+        row [
+          text title { variant: "title" }
+          Button { label: "✕", variant: "ghost", onClick: onClose }
+        ]
+        slot
+      ] { variant: "dialog-panel" }
+    ] { variant: "dialog-overlay" }
diff --git a/registry/components/input.ds b/registry/components/input.ds
index dc29501..1ddd676 100644
--- a/registry/components/input.ds
+++ b/registry/components/input.ds
@@ -1,8 +1,10 @@
 -- DreamStack Input Component
 -- Text input with label, placeholder, and error state
 
-export component Input(value, placeholder, label) =
+export component Input(value, placeholder, label, error, helper) =
   column [
-    text label { variant: "label" }
+    when label -> text label { variant: "label" }
     input { bind: value, placeholder: placeholder }
+    when error -> text error { variant: "error" }
+    when helper -> text helper { variant: "subtitle" }
   ]
diff --git a/registry/components/progress.ds b/registry/components/progress.ds
index 077cc2f..b62eae7 100644
--- a/registry/components/progress.ds
+++ b/registry/components/progress.ds
@@ -1,10 +1,10 @@
 -- DreamStack Progress Component
--- Animated progress bar with percentage display
+-- Animated progress bar with percentage, label, and variant
 
-export component Progress(value, label) =
+export component Progress(value, label, variant) =
   column [
     row [
-      text label { variant: "label" }
+      when label -> text label { variant: "label" }
       text "{value}%" { variant: "label" }
     ]
     column [
diff --git a/registry/components/select.ds b/registry/components/select.ds
new file mode 100644
index 0000000..b0ad513
--- /dev/null
+++ b/registry/components/select.ds
@@ -0,0 +1,12 @@
+-- DreamStack Select Component
+-- Option selector displayed as button group
+
+export component Select(value, label, opt1, opt2, opt3, onSelect1, onSelect2, onSelect3) =
+  column [
+    when label -> text label { variant: "label" }
+    row [
+      button opt1 { click: onSelect1, variant: "secondary" }
+      button opt2 { click: onSelect2, variant: "secondary" }
+      when opt3 -> button opt3 { click: onSelect3, variant: "secondary" }
+    ]
+  ]
diff --git a/registry/components/separator.ds b/registry/components/separator.ds
index c3b707e..fb8effc 100644
--- a/registry/components/separator.ds
+++ b/registry/components/separator.ds
@@ -1,5 +1,9 @@
 -- DreamStack Separator Component
--- Visual divider between content sections
+-- Visual divider between sections
 
-export component Separator() =
-  text ""
+export component Separator(label) =
+  row [
+    column [] { variant: "separator-line" }
+    when label -> text label { variant: "separator-label" }
+    when label -> column [] { variant: "separator-line" }
+  ] { variant: "separator" }
diff --git a/registry/components/stat.ds b/registry/components/stat.ds
new file mode 100644
index 0000000..a7cc08e
--- /dev/null
+++ b/registry/components/stat.ds
@@ -0,0 +1,9 @@
+-- DreamStack Stat Component
+-- Dashboard metric card with label, value, and change delta
+
+export component Stat(label, value, change) =
+  column [
+    text label { variant: "subtitle" }
+    text value { variant: "title" }
+    when change -> text change { variant: "label" }
+  ] { variant: "card" }
diff --git a/registry/components/tabs.ds b/registry/components/tabs.ds
new file mode 100644
index 0000000..e223934
--- /dev/null
+++ b/registry/components/tabs.ds
@@ -0,0 +1,9 @@
+-- DreamStack Tabs Component
+-- Tab switcher with active state indicator
+
+export component Tabs(activeTab, onTab1, onTab2, onTab3, label1, label2, label3) =
+  row [
+    button label1 { click: onTab1, variant: "primary" }
+    button label2 { click: onTab2, variant: "secondary" }
+    when label3 -> button label3 { click: onTab3, variant: "secondary" }
+  ] { variant: "tabs" }
diff --git a/registry/components/toast.ds b/registry/components/toast.ds
index 957155f..b96e88a 100644
--- a/registry/components/toast.ds
+++ b/registry/components/toast.ds
@@ -1,5 +1,6 @@
 -- DreamStack Toast Component
--- Notification toast with slide-in animation
+-- Notification toast with variant and visibility
 
-export component Toast(message) =
-  text message
+export component Toast(message, variant, visible) =
+  when visible ->
+    text message { variant: variant }
diff --git a/registry/components/toggle.ds b/registry/components/toggle.ds
index d0f00aa..97a9738 100644
--- a/registry/components/toggle.ds
+++ b/registry/components/toggle.ds
@@ -1,5 +1,8 @@
 -- DreamStack Toggle Component
--- On/off switch
+-- On/off switch with label
 
-export component Toggle(value, onChange) =
-  button "" { click: onChange }
+export component Toggle(value, label, onChange) =
+  row [
+    when label -> text label
+    button "Toggle" { click: onChange, variant: "toggle" }
+  ]