diff --git a/packages/x-components/src/components/column-picker/base-column-picker-dropdown.vue b/packages/x-components/src/components/column-picker/base-column-picker-dropdown.vue
index 1f0d43b2b4..666a576fd4 100644
--- a/packages/x-components/src/components/column-picker/base-column-picker-dropdown.vue
+++ b/packages/x-components/src/components/column-picker/base-column-picker-dropdown.vue
@@ -97,7 +97,7 @@ unlike the `toggle`, which renders the same `item` slot defined by default.
 
 #### Default usage
 
-```vue
+```vue live
 <template>
   <BaseColumnPickerDropdown v-model="selectedColumns" :columns="[2, 4, 6]">
     <template #item="{ item, isSelected, isHighlighted }">
@@ -127,7 +127,7 @@ unlike the `toggle`, which renders the same `item` slot defined by default.
 
 #### Customizing toggle button
 
-```vue
+```vue live
 <template>
   <BaseColumnPickerDropdown v-model="selectedColumns" :columns="[2, 4, 6]">
     <template #toggle="{ item, isOpen }">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>
@@ -162,7 +162,7 @@ The component emits an X Event, `UserClickedColumnPicker`, on column change and
 that event from outside, so you don't need to store the current column value to keep it synchronized
 with other column pickers.
 
-```vue
+```vue live
 <template>
   <BaseColumnPickerDropdown :columns="[2, 4, 6]">
     <template #toggle="{ item, isOpen }">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>
diff --git a/packages/x-components/src/components/column-picker/base-column-picker-list.vue b/packages/x-components/src/components/column-picker/base-column-picker-list.vue
index 493925d5c9..38a2c9a700 100644
--- a/packages/x-components/src/components/column-picker/base-column-picker-list.vue
+++ b/packages/x-components/src/components/column-picker/base-column-picker-list.vue
@@ -101,7 +101,7 @@ number of columns that it is being selected when it is clicked.
 
 It is required to send the columns prop.
 
-```vue
+```vue live
 <template>
   <BaseColumnPickerList :columns="columns" />
 </template>
@@ -124,7 +124,7 @@ It is required to send the columns prop.
 It is possible to do two way binding in order to synchronize the value with the parents. It will be
 updated if it changed the value or if the parent changes it.
 
-```vue
+```vue live
 <template>
   <BaseColumnPickerList :columns="columns" v-model="selectedColumns" />
 </template>
@@ -148,7 +148,7 @@ updated if it changed the value or if the parent changes it.
 
 It is possible to override the column picker button content.
 
-```vue
+```vue live
 <template>
   <BaseColumnPickerList :columns="columns" #default="{ column, isSelected }">
     <span>{{ column }} {{ isSelected ? '🟢' : '' }}</span>
@@ -171,7 +171,7 @@ It is possible to override the column picker button content.
 It is also possible to add a divider element between the column picker buttons by overriding the
 `divider` slot.
 
-```vue
+```vue live
 <template>
   <BaseColumnPickerList :columns="columns">
     <template #divider>
@@ -198,7 +198,7 @@ It is also possible to add a divider element between the column picker buttons b
 
 The `buttonClass` prop can be used to add classes to the buttons.
 
-```vue
+```vue live
 <template>
   <BaseColumnPickerList :columns="columns" buttonClass="x-button--round" />
 </template>