diff --git a/example/src/views/DataTableView.vue b/example/src/views/DataTableView.vue
index 88f3d6f..86dacda 100644
--- a/example/src/views/DataTableView.vue
+++ b/example/src/views/DataTableView.vue
@@ -610,7 +610,7 @@ onBeforeMount(() => {
       <div class="grid grid-cols-1 gap-12 mb-14">
         <div
           v-for="({ title, table, emptySlot }, i) in emptyTables"
-          :key="i"
+          :key="`${title}${i}`"
           class="flex flex-col space-y-3"
           :data-cy="title"
         >
@@ -645,7 +645,7 @@ onBeforeMount(() => {
 
         <div
           v-for="({ title, table }, i) in datatables"
-          :key="i"
+          :key="`${title}${i}`"
           class="flex flex-col space-y-3"
           :data-cy="title"
         >
@@ -683,7 +683,7 @@ onBeforeMount(() => {
       <div class="grid grid-cols-1 gap-12">
         <div
           v-for="({ title, table }, i) in apiDatatables"
-          :key="i"
+          :key="`${title}${i}`"
           class="flex flex-col space-y-3"
           :data-cy="title"
         >
diff --git a/example/src/views/ProgressView.vue b/example/src/views/ProgressView.vue
index aa7bcb1..170f099 100644
--- a/example/src/views/ProgressView.vue
+++ b/example/src/views/ProgressView.vue
@@ -1,11 +1,8 @@
 <script lang="ts" setup>
-import { RuiProgress } from '@rotki/ui-library-compat';
+import { type ProgressProps, RuiProgress } from '@rotki/ui-library-compat';
 import { ref } from 'vue';
-import { type DataType } from '@/types';
 
-type ProgressData = DataType<typeof RuiProgress, number>;
-
-const progress = ref<ProgressData[]>([
+const progress = ref<ProgressProps[]>([
   {
     value: 40,
     color: 'primary',
diff --git a/example/src/views/TextFieldView.vue b/example/src/views/TextFieldView.vue
index 4768096..58a63ad 100644
--- a/example/src/views/TextFieldView.vue
+++ b/example/src/views/TextFieldView.vue
@@ -1,9 +1,14 @@
 <script lang="ts" setup>
-import { RuiRevealableTextField, RuiTextField } from '@rotki/ui-library-compat';
+import {
+  RuiRevealableTextField,
+  RuiTextField,
+  type TextFieldProps,
+} from '@rotki/ui-library-compat';
 import { ref } from 'vue';
-import { type DataType, type Slots } from '@/types';
+import { objectOmit } from '@vueuse/shared';
+import { type Slots } from '@/types';
 
-type TextFieldData = DataType<typeof RuiTextField, string> & Slots;
+type TextFieldData = TextFieldProps & Slots;
 
 const textFields = ref<TextFieldData[]>([
   { value: '', color: 'primary' },
@@ -211,7 +216,7 @@ const revealableTextFields = ref([
         :key="i"
         v-model="field.value"
         placeholder="Placeholder"
-        v-bind="field"
+        v-bind="objectOmit(field, ['value'])"
       />
     </div>
   </div>
diff --git a/example/src/views/TooltipView.vue b/example/src/views/TooltipView.vue
index 8f707bd..00ec8a0 100644
--- a/example/src/views/TooltipView.vue
+++ b/example/src/views/TooltipView.vue
@@ -1,101 +1,101 @@
 <script lang="ts" setup>
 import {
+  type ButtonProps,
   RuiButton,
   RuiTooltip,
   type TooltipProps,
 } from '@rotki/ui-library-compat/components';
 import { objectOmit } from '@vueuse/shared';
 import { ref } from 'vue';
-import { type DataType } from '@/types';
 
-const tooltips = ref<
-  (TooltipProps & { buttonColor?: DataType<typeof RuiButton>['color'] })[]
->([
-  {
-    disabled: false,
-    hideArrow: true,
-    text: 'Bottom',
-    buttonColor: 'primary',
-    popper: { placement: 'bottom' },
-  },
-  {
-    disabled: false,
-    hideArrow: true,
-    text: 'Top',
-    buttonColor: 'secondary',
-    popper: { placement: 'top' },
-  },
-  {
-    disabled: false,
-    hideArrow: true,
-    text: 'Left',
-    buttonColor: 'error',
-    popper: { placement: 'left' },
-  },
-  {
-    disabled: false,
-    hideArrow: true,
-    text: 'Right',
-    buttonColor: 'info',
-    popper: { placement: 'right' },
-  },
-  {
-    disabled: false,
-    hideArrow: false,
-    text: 'Bottom With arrow',
-    buttonColor: 'primary',
-    popper: { placement: 'bottom' },
-  },
-  {
-    disabled: false,
-    hideArrow: false,
-    text: 'Top With arrow',
-    buttonColor: 'secondary',
-    popper: { placement: 'top' },
-  },
-  {
-    disabled: false,
-    hideArrow: false,
-    text: 'Left With arrow',
-    buttonColor: 'error',
-    popper: { placement: 'left' },
-  },
-  {
-    disabled: false,
-    hideArrow: false,
-    text: 'Right With arrow',
-    buttonColor: 'info',
-    popper: { placement: 'right' },
-  },
-  {
-    disabled: true,
-    hideArrow: false,
-    text: 'Tooltip disabled',
-    buttonColor: 'primary',
-    popper: { placement: 'bottom' },
-  },
-  {
-    disabled: true,
-    hideArrow: false,
-    text: 'Tooltip disabled',
-    buttonColor: 'secondary',
-    popper: { placement: 'top' },
-  },
-  {
-    disabled: true,
-    hideArrow: false,
-    text: 'Tooltip disabled',
-    buttonColor: 'error',
-    popper: { placement: 'left' },
-  },
-  {
-    disabled: true,
-    hideArrow: false,
-    text: 'Tooltip disabled',
-    buttonColor: 'info',
-    popper: { placement: 'right' },
-  },
-]);
+const tooltips = ref<(TooltipProps & { buttonColor?: ButtonProps['color'] })[]>(
+  [
+    {
+      disabled: false,
+      hideArrow: true,
+      text: 'Bottom',
+      buttonColor: 'primary',
+      popper: { placement: 'bottom' },
+    },
+    {
+      disabled: false,
+      hideArrow: true,
+      text: 'Top',
+      buttonColor: 'secondary',
+      popper: { placement: 'top' },
+    },
+    {
+      disabled: false,
+      hideArrow: true,
+      text: 'Left',
+      buttonColor: 'error',
+      popper: { placement: 'left' },
+    },
+    {
+      disabled: false,
+      hideArrow: true,
+      text: 'Right',
+      buttonColor: 'info',
+      popper: { placement: 'right' },
+    },
+    {
+      disabled: false,
+      hideArrow: false,
+      text: 'Bottom With arrow',
+      buttonColor: 'primary',
+      popper: { placement: 'bottom' },
+    },
+    {
+      disabled: false,
+      hideArrow: false,
+      text: 'Top With arrow',
+      buttonColor: 'secondary',
+      popper: { placement: 'top' },
+    },
+    {
+      disabled: false,
+      hideArrow: false,
+      text: 'Left With arrow',
+      buttonColor: 'error',
+      popper: { placement: 'left' },
+    },
+    {
+      disabled: false,
+      hideArrow: false,
+      text: 'Right With arrow',
+      buttonColor: 'info',
+      popper: { placement: 'right' },
+    },
+    {
+      disabled: true,
+      hideArrow: false,
+      text: 'Tooltip disabled',
+      buttonColor: 'primary',
+      popper: { placement: 'bottom' },
+    },
+    {
+      disabled: true,
+      hideArrow: false,
+      text: 'Tooltip disabled',
+      buttonColor: 'secondary',
+      popper: { placement: 'top' },
+    },
+    {
+      disabled: true,
+      hideArrow: false,
+      text: 'Tooltip disabled',
+      buttonColor: 'error',
+      popper: { placement: 'left' },
+    },
+    {
+      disabled: true,
+      hideArrow: false,
+      text: 'Tooltip disabled',
+      buttonColor: 'info',
+      popper: { placement: 'right' },
+    },
+  ],
+);
 </script>
 
 <template>