diff --git a/cli/templates.mjs b/cli/templates.mjs
index 53e6c679..2ef930a8 100644
--- a/cli/templates.mjs
+++ b/cli/templates.mjs
@@ -5,7 +5,7 @@ const playground = ({ name, pro }) => {
   const kebabName = kebabCase(name)
 
   return {
-    filename: `playground/pages/${kebabName}.vue`,
+    filename: `playground/pages/components/${kebabName}.vue`,
     contents: pro
       ? undefined
       : `
diff --git a/playground/app/app.vue b/playground/app/app.vue
index 94898c31..adebdf3f 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -46,7 +46,7 @@ const components = [
   'tooltip'
 ]
 
-const items = components.map(component => ({ label: upperName(component), to: `/${component}` }))
+const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))
 
 function upperName(name: string) {
   return splitByCase(name).map(p => upperFirst(p)).join('')
diff --git a/playground/app/pages/accordion.vue b/playground/app/pages/components/accordion.vue
similarity index 100%
rename from playground/app/pages/accordion.vue
rename to playground/app/pages/components/accordion.vue
diff --git a/playground/app/pages/alert.vue b/playground/app/pages/components/alert.vue
similarity index 100%
rename from playground/app/pages/alert.vue
rename to playground/app/pages/components/alert.vue
diff --git a/playground/app/pages/avatar.vue b/playground/app/pages/components/avatar.vue
similarity index 100%
rename from playground/app/pages/avatar.vue
rename to playground/app/pages/components/avatar.vue
diff --git a/playground/app/pages/badge.vue b/playground/app/pages/components/badge.vue
similarity index 100%
rename from playground/app/pages/badge.vue
rename to playground/app/pages/components/badge.vue
diff --git a/playground/app/pages/breadcrumb.vue b/playground/app/pages/components/breadcrumb.vue
similarity index 100%
rename from playground/app/pages/breadcrumb.vue
rename to playground/app/pages/components/breadcrumb.vue
diff --git a/playground/app/pages/button-group.vue b/playground/app/pages/components/button-group.vue
similarity index 100%
rename from playground/app/pages/button-group.vue
rename to playground/app/pages/components/button-group.vue
diff --git a/playground/app/pages/button.vue b/playground/app/pages/components/button.vue
similarity index 100%
rename from playground/app/pages/button.vue
rename to playground/app/pages/components/button.vue
diff --git a/playground/app/pages/card.vue b/playground/app/pages/components/card.vue
similarity index 100%
rename from playground/app/pages/card.vue
rename to playground/app/pages/components/card.vue
diff --git a/playground/app/pages/checkbox.vue b/playground/app/pages/components/checkbox.vue
similarity index 100%
rename from playground/app/pages/checkbox.vue
rename to playground/app/pages/components/checkbox.vue
diff --git a/playground/app/pages/chip.vue b/playground/app/pages/components/chip.vue
similarity index 100%
rename from playground/app/pages/chip.vue
rename to playground/app/pages/components/chip.vue
diff --git a/playground/app/pages/collapsible.vue b/playground/app/pages/components/collapsible.vue
similarity index 100%
rename from playground/app/pages/collapsible.vue
rename to playground/app/pages/components/collapsible.vue
diff --git a/playground/app/pages/command-palette.vue b/playground/app/pages/components/command-palette.vue
similarity index 100%
rename from playground/app/pages/command-palette.vue
rename to playground/app/pages/components/command-palette.vue
diff --git a/playground/app/pages/context-menu.vue b/playground/app/pages/components/context-menu.vue
similarity index 100%
rename from playground/app/pages/context-menu.vue
rename to playground/app/pages/components/context-menu.vue
diff --git a/playground/app/pages/drawer.vue b/playground/app/pages/components/drawer.vue
similarity index 100%
rename from playground/app/pages/drawer.vue
rename to playground/app/pages/components/drawer.vue
diff --git a/playground/app/pages/dropdown-menu.vue b/playground/app/pages/components/dropdown-menu.vue
similarity index 100%
rename from playground/app/pages/dropdown-menu.vue
rename to playground/app/pages/components/dropdown-menu.vue
diff --git a/playground/app/pages/form-field.vue b/playground/app/pages/components/form-field.vue
similarity index 100%
rename from playground/app/pages/form-field.vue
rename to playground/app/pages/components/form-field.vue
diff --git a/playground/app/pages/form.vue b/playground/app/pages/components/form.vue
similarity index 100%
rename from playground/app/pages/form.vue
rename to playground/app/pages/components/form.vue
diff --git a/playground/app/pages/input-menu.vue b/playground/app/pages/components/input-menu.vue
similarity index 100%
rename from playground/app/pages/input-menu.vue
rename to playground/app/pages/components/input-menu.vue
diff --git a/playground/app/pages/input.vue b/playground/app/pages/components/input.vue
similarity index 100%
rename from playground/app/pages/input.vue
rename to playground/app/pages/components/input.vue
diff --git a/playground/app/pages/kbd.vue b/playground/app/pages/components/kbd.vue
similarity index 100%
rename from playground/app/pages/kbd.vue
rename to playground/app/pages/components/kbd.vue
diff --git a/playground/app/pages/link.vue b/playground/app/pages/components/link.vue
similarity index 100%
rename from playground/app/pages/link.vue
rename to playground/app/pages/components/link.vue
diff --git a/playground/app/pages/modal.vue b/playground/app/pages/components/modal.vue
similarity index 100%
rename from playground/app/pages/modal.vue
rename to playground/app/pages/components/modal.vue
diff --git a/playground/app/pages/navigation-menu.vue b/playground/app/pages/components/navigation-menu.vue
similarity index 100%
rename from playground/app/pages/navigation-menu.vue
rename to playground/app/pages/components/navigation-menu.vue
diff --git a/playground/app/pages/pagination.vue b/playground/app/pages/components/pagination.vue
similarity index 100%
rename from playground/app/pages/pagination.vue
rename to playground/app/pages/components/pagination.vue
diff --git a/playground/app/pages/popover.vue b/playground/app/pages/components/popover.vue
similarity index 100%
rename from playground/app/pages/popover.vue
rename to playground/app/pages/components/popover.vue
diff --git a/playground/app/pages/progress.vue b/playground/app/pages/components/progress.vue
similarity index 100%
rename from playground/app/pages/progress.vue
rename to playground/app/pages/components/progress.vue
diff --git a/playground/app/pages/radio-group.vue b/playground/app/pages/components/radio-group.vue
similarity index 100%
rename from playground/app/pages/radio-group.vue
rename to playground/app/pages/components/radio-group.vue
diff --git a/playground/app/pages/select-menu.vue b/playground/app/pages/components/select-menu.vue
similarity index 100%
rename from playground/app/pages/select-menu.vue
rename to playground/app/pages/components/select-menu.vue
diff --git a/playground/app/pages/select.vue b/playground/app/pages/components/select.vue
similarity index 100%
rename from playground/app/pages/select.vue
rename to playground/app/pages/components/select.vue
diff --git a/playground/app/pages/separator.vue b/playground/app/pages/components/separator.vue
similarity index 100%
rename from playground/app/pages/separator.vue
rename to playground/app/pages/components/separator.vue
diff --git a/playground/app/pages/shortcuts.vue b/playground/app/pages/components/shortcuts.vue
similarity index 100%
rename from playground/app/pages/shortcuts.vue
rename to playground/app/pages/components/shortcuts.vue
diff --git a/playground/app/pages/skeleton.vue b/playground/app/pages/components/skeleton.vue
similarity index 100%
rename from playground/app/pages/skeleton.vue
rename to playground/app/pages/components/skeleton.vue
diff --git a/playground/app/pages/slideover.vue b/playground/app/pages/components/slideover.vue
similarity index 100%
rename from playground/app/pages/slideover.vue
rename to playground/app/pages/components/slideover.vue
diff --git a/playground/app/pages/slider.vue b/playground/app/pages/components/slider.vue
similarity index 100%
rename from playground/app/pages/slider.vue
rename to playground/app/pages/components/slider.vue
diff --git a/playground/app/pages/switch.vue b/playground/app/pages/components/switch.vue
similarity index 100%
rename from playground/app/pages/switch.vue
rename to playground/app/pages/components/switch.vue
diff --git a/playground/app/pages/tabs.vue b/playground/app/pages/components/tabs.vue
similarity index 100%
rename from playground/app/pages/tabs.vue
rename to playground/app/pages/components/tabs.vue
diff --git a/playground/app/pages/textarea.vue b/playground/app/pages/components/textarea.vue
similarity index 100%
rename from playground/app/pages/textarea.vue
rename to playground/app/pages/components/textarea.vue
diff --git a/playground/app/pages/toast.vue b/playground/app/pages/components/toast.vue
similarity index 100%
rename from playground/app/pages/toast.vue
rename to playground/app/pages/components/toast.vue
diff --git a/playground/app/pages/tooltip.vue b/playground/app/pages/components/tooltip.vue
similarity index 100%
rename from playground/app/pages/tooltip.vue
rename to playground/app/pages/components/tooltip.vue