diff --git a/example/app.vue b/docs/app.vue
similarity index 73%
rename from example/app.vue
rename to docs/app.vue
index 0df35279..9d07a3d4 100644
--- a/example/app.vue
+++ b/docs/app.vue
@@ -11,10 +11,10 @@
             <ULink
               v-for="component in components"
               :key="component.name"
-              :to="component.to"
+              :to="`/components/${component.name}`"
               class="text-sm font-medium block w-full"
               active-class="text-primary-600"
-              inactive-class="text-tw-gray-900"
+              inactive-class="text-tw-gray-500 hover:text-tw-gray-900"
             >
               {{ component.name }}
             </ULink>
@@ -40,14 +40,14 @@ useMeta({
 })
 
 const components = [
-  { name: 'Avatar', to: '/Avatar' },
-  { name: 'Button', to: '/Button' },
-  { name: 'Badge', to: '/Badge' },
-  { name: 'Dropdown', to: '/Dropdown' },
-  { name: 'Icon', to: '/Icon' },
-  { name: 'Toggle', to: '/Toggle' },
-  { name: 'Card', to: '/Card' },
-  { name: 'Modal', to: '/Modal' },
-  { name: 'Select', to: '/Select' }
+  { name: 'Avatar' },
+  { name: 'Button' },
+  { name: 'Badge' },
+  { name: 'Dropdown' },
+  { name: 'Icon' },
+  { name: 'Toggle' },
+  { name: 'Card' },
+  { name: 'Modal' },
+  { name: 'Select' }
 ]
 </script>
diff --git a/example/nuxt.config.ts b/docs/nuxt.config.ts
similarity index 100%
rename from example/nuxt.config.ts
rename to docs/nuxt.config.ts
diff --git a/example/pages/[component].vue b/docs/pages/components/[component].vue
similarity index 97%
rename from example/pages/[component].vue
rename to docs/pages/components/[component].vue
index b71b2a0a..fc577ad9 100644
--- a/example/pages/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -1,5 +1,5 @@
 <template>
-  <UCard background-class="bg-tw-gray-100">
+  <UCard v-if="component" background-class="bg-tw-gray-100">
     <div class="flex justify-center">
       <component :is="is" v-bind="boundProps" />
     </div>
diff --git a/example/pages/index.vue b/docs/pages/index.vue
similarity index 84%
rename from example/pages/index.vue
rename to docs/pages/index.vue
index a34ca401..70184bba 100644
--- a/example/pages/index.vue
+++ b/docs/pages/index.vue
@@ -10,6 +10,16 @@
       <UAvatar src="https://picsum.photos/200/300" />
     </div>
 
+    <div>
+      <UCard @submit.prevent="onSubmit">
+        <UInputGroup label="Email" name="email">
+          <UInput type="email" name="email" />
+        </UInputGroup>
+
+        <UButton type="submit" label="Submit" />
+      </UCard>
+    </div>
+
     <div>
       <UButton @click="toggleModalIsOpen()">
         Toggle modal!
@@ -62,16 +72,21 @@ function toggleModalIsOpen () {
   isModalOpen.value = !isModalOpen.value
 }
 
-function clickItem () {
+function onClick () {
   // eslint-disable-next-line no-console
-  console.warn('clicked')
+  console.warn('click')
+}
+
+function onSubmit () {
+  // eslint-disable-next-line no-console
+  console.warn('submit')
 }
 
 const dropdownItems = [
   [{
     label: 'Edit',
     icon: 'heroicons-solid:pencil',
-    click: () => clickItem()
+    click: () => onClick()
   }, {
     label: 'Duplicate',
     icon: 'heroicons-solid:duplicate'
diff --git a/package.json b/package.json
index fd128a03..0664b315 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
   ],
   "scripts": {
     "build": "unbuild",
-    "dev": "nuxi dev example",
+    "dev": "nuxi dev docs",
+    "build:docs": "nuxi build docs",
     "lint": "eslint --ext .ts,.js,.vue ."
   },
   "dependencies": {