diff --git a/packages/devtools/app/components/ComponentPropInput.vue b/packages/devtools/app/components/ComponentPropInput.vue
index dceffa92..a98556ed 100644
--- a/packages/devtools/app/components/ComponentPropInput.vue
+++ b/packages/devtools/app/components/ComponentPropInput.vue
@@ -58,6 +58,10 @@ function inferDefaultInput(value?: any, types?: PropSchema[]): PropSchema | unde
   })
 }
 
+function clearValue() {
+  modelValue.value = undefined
+}
+
 const description = computed(() => {
   return props.description?.replace(/`([^`]+)`/g, '<code class="text-xs font-medium bg-elevated px-1 py-0.5 rounded">$1</code>')
 })
@@ -81,7 +85,7 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
         size="sm"
         :trailing-icon="undefined"
         class="font-medium text-ellipsis truncate max-w-50 py-0.5 px-1.5 font-mono bg-elevated/50 border border-default"
-        @update:model-value="modelValue = undefined"
+        @update:model-value="clearValue()"
       />
     </DefineSelect>
 
@@ -95,6 +99,18 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
         :name="name"
         :disabled="disabled"
       />
+      <slot name="actions">
+        <UButton
+          v-if="currentInput?.component && modelValue !== undefined && currentInput?.inputType !== 'boolean'"
+          variant="outline"
+          color="neutral"
+          icon="i-lucide-x"
+          size="sm"
+          class="p-2"
+          square
+          @click="clearValue()"
+        />
+      </slot>
     </DefineInput>
 
     <DefineLabel>
@@ -132,7 +148,6 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
 
         <div class="flex gap-2 justify-center">
           <ReuseInput />
-          <slot name="actions" />
         </div>
       </UFormField>
     </template>
@@ -156,7 +171,6 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
         </template>
         <div class="flex w-full gap-2">
           <ReuseInput />
-          <slot name="actions" />
         </div>
       </UFormField>
       <div class="mt-2">
diff --git a/packages/devtools/app/components/ComponentProps.vue b/packages/devtools/app/components/ComponentProps.vue
index e253a5ac..39401861 100644
--- a/packages/devtools/app/components/ComponentProps.vue
+++ b/packages/devtools/app/components/ComponentProps.vue
@@ -30,7 +30,7 @@ function onResetState() {
   if (isRotated.value) return
   setTimeout(() => isRotated.value = false, 500)
   isRotated.value = true
-  modelValue.value = { ...props.defaultValue }
+  modelValue.value = structuredClone(props.defaultValue ?? {})
 }
 </script>
 
diff --git a/packages/devtools/app/components/inputs/ArrayInput.vue b/packages/devtools/app/components/inputs/ArrayInput.vue
index e8477b18..ff5b07d0 100644
--- a/packages/devtools/app/components/inputs/ArrayInput.vue
+++ b/packages/devtools/app/components/inputs/ArrayInput.vue
@@ -8,6 +8,7 @@ const modelValue = defineModel<Array<any>>()
 function removeArrayItem(index: number) {
   if (!modelValue.value) return
   modelValue.value.splice(index, 1)
+  modelValue.value = [...modelValue.value]
 }
 
 function addArrayItem() {
@@ -15,6 +16,7 @@ function addArrayItem() {
     modelValue.value = [null]
   } else {
     modelValue.value.push(null)
+    modelValue.value = [...modelValue.value]
   }
   openedItem.value = modelValue.value?.length - 1
 }
diff --git a/packages/devtools/app/pages/components.vue b/packages/devtools/app/pages/components.vue
index f1c3f999..bd3d15be 100644
--- a/packages/devtools/app/pages/components.vue
+++ b/packages/devtools/app/pages/components.vue
@@ -107,7 +107,7 @@ watch([componentMeta, exampleMeta], async ([newComponentMeta, newExampleMeta]) =
   }
 
   if (!touched.value) {
-    props.value = { ...defaultProps.value, ...compodiumDefaultProps.value }
+    props.value = structuredClone({ ...defaultProps.value, ...compodiumDefaultProps.value })
 
     combo.value = [...(
       newExampleMeta?.compodium?.combo