diff --git a/packages/histoire-controls/src/components/button/HstButton.story.vue b/packages/histoire-controls/src/components/button/HstButton.story.vue
index b68e1964..ad316ab9 100644
--- a/packages/histoire-controls/src/components/button/HstButton.story.vue
+++ b/packages/histoire-controls/src/components/button/HstButton.story.vue
@@ -20,7 +20,7 @@ const variants: Array<{name: string, bind?: unknown}> = [
       :title="variant.name"
     >
       <HstButton
-        v-bind="variant.bind"
+        v-bind="variant.bind as {}"
         class="htw-p-2"
       >
         Click me!
diff --git a/packages/histoire-controls/src/components/design-tokens/HstColorShades.story.vue b/packages/histoire-controls/src/components/design-tokens/HstColorShades.story.vue
index eecea3ca..1a0b571f 100644
--- a/packages/histoire-controls/src/components/design-tokens/HstColorShades.story.vue
+++ b/packages/histoire-controls/src/components/design-tokens/HstColorShades.story.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import HstColorShades from './HstColorShades.vue'
+import type { CSSProperties } from 'vue'
 
 const colors = {
   slate: {
@@ -311,7 +312,7 @@ const colors = {
             class="htw-rounded htw-h-[100px]"
             :style="{
               backgroundColor: color,
-            }"
+            } as CSSProperties"
           />
         </template>
       </HstColorShades>
@@ -329,7 +330,7 @@ const colors = {
             class="htw-rounded htw-h-[100px] htw-text-5xl htw-flex htw-items-end"
             :style="{
               color: color,
-            }"
+            } as CSSProperties"
           >
             Aa
           </div>
@@ -349,7 +350,7 @@ const colors = {
             class="htw-rounded htw-h-[100px] htw-border-solid htw-border-2"
             :style="{
               borderColor: color,
-            }"
+            } as CSSProperties"
           />
         </template>
       </HstColorShades>
diff --git a/packages/histoire-controls/src/components/design-tokens/HstColorShades.vue b/packages/histoire-controls/src/components/design-tokens/HstColorShades.vue
index dc50c209..86d1a705 100644
--- a/packages/histoire-controls/src/components/design-tokens/HstColorShades.vue
+++ b/packages/histoire-controls/src/components/design-tokens/HstColorShades.vue
@@ -8,6 +8,7 @@ export default {
 import { computed, ref } from 'vue'
 import { VTooltip as vTooltip } from 'floating-vue'
 import HstCopyIcon from '../HstCopyIcon.vue'
+import type { CSSProperties } from 'vue'
 
 const props = defineProps<{
   shades: Record<string, any>
@@ -68,7 +69,7 @@ const hover = ref<string>(null)
           class="htw-rounded-full htw-w-16 htw-h-16"
           :style="{
             backgroundColor: shade.color,
-          }"
+          } as CSSProperties"
         />
       </slot>
       <div>
diff --git a/packages/histoire-controls/src/components/design-tokens/HstTokenList.story.vue b/packages/histoire-controls/src/components/design-tokens/HstTokenList.story.vue
index ebead6a8..d6b6adbb 100644
--- a/packages/histoire-controls/src/components/design-tokens/HstTokenList.story.vue
+++ b/packages/histoire-controls/src/components/design-tokens/HstTokenList.story.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import HstTokenList from './HstTokenList.vue'
+import type { CSSProperties } from 'vue'
 
 const tokens = {
   0: 0,
@@ -70,7 +71,7 @@ const tokens = {
               class="htw-h-20 htw-bg-gray-500/50"
               :style="{
                 width: token.value as string,
-              }"
+              } as CSSProperties"
             />
           </div>
         </template>