diff --git a/components/BarBottom.vue b/components/BarBottom.vue
index 3456fa7..8e4908d 100644
--- a/components/BarBottom.vue
+++ b/components/BarBottom.vue
@@ -4,9 +4,6 @@ export default {
     title: {
       type: String,
     },
-    social: {
-      type: Array
-    }
   }
 }
 </script>
@@ -17,10 +14,7 @@ export default {
       {{ title }}
     </div>
     <div class="w-1/2 flex justify-end">
-      <div v-for="type in social" :key="type.type" class="flex justify-center items-center ml-4">
-        <span><LogoIcon :type="type.type" /></span>
-        <span class="ml-0.5">{{type.username}}</span>
-      </div>
+      <slot />
     </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/components/Item.vue b/components/Item.vue
new file mode 100644
index 0000000..e50eefb
--- /dev/null
+++ b/components/Item.vue
@@ -0,0 +1,22 @@
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      required: true,
+      default: '@username'
+    },
+  },
+}
+</script>
+
+<template>
+  <div class="flex justify-center items-center ml-4">
+    <span class="flex justify-center item-center">
+      <slot />
+    </span>
+    <span class="ml-0.5">
+      {{text}}
+    </span>
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/LogoIcon.vue b/components/LogoIcon.vue
deleted file mode 100644
index c992b89..0000000
--- a/components/LogoIcon.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  props: {
-    type: {
-      type: String,
-      require: true,
-      default: 'default',
-    },
-  },
-  computed: {
-    convertedTypeToLowercase() {
-      return this.type.toLowerCase()
-    },
-  },
-})
-</script>
-
-<template>
-  <carbon:logo-youtube v-if="convertedTypeToLowercase === 'yt'" />
-  <carbon:logo-twitter v-else-if="convertedTypeToLowercase === 'tw'" />
-  <carbon:logo-instagram v-else-if="convertedTypeToLowercase === 'ig'" />
-  <carbon:logo-facebook v-else-if="convertedTypeToLowercase === 'fb'" />
-  <carbon:logo-github v-else-if="convertedTypeToLowercase === 'gh'" />
-  <carbon:logo-linkedin v-else-if="convertedTypeToLowercase === 'lk'" />
-  <carbon:link v-else-if="convertedTypeToLowercase === 'wb'" />
-  <carbon:user-filled v-else />
-</template>
diff --git a/example.md b/example.md
index 3f32a73..77e0d1f 100644
--- a/example.md
+++ b/example.md
@@ -12,14 +12,17 @@ Presentation slides for developers
   </span>
 </div>
 
-<BarBottom
-  title="Slidev theme purplin"
-  :social="[
-    { type: 'gh', username: 'slidevjs/slidev' },
-    { type: 'tw', username: 'Slidevjs' },
-    { type: 'wb', username: 'sli.dev' }
-  ]"
-/>
+<BarBottom  title="Slidev theme purplin">
+  <Item text="slidevjs/slidev">
+    <carbon:logo-github />
+  </Item>
+  <Item text="Slidevjs">
+    <carbon:logo-twitter />
+  </Item>
+  <Item text="sli.dev">
+    <carbon:link />
+  </Item>
+</BarBottom>
 
 ---
 layout: intro
@@ -70,14 +73,17 @@ layout: intro
 </div>
 </div>
 
-<BarBottom
-  title="Slidev theme purplin"
-  :social="[
-    { type: 'gh', username: 'slidevjs/slidev' },
-    { type: 'tw', username: 'Slidevjs' },
-    { type: 'wb', username: 'sli.dev' }
-  ]"
-/>
+<BarBottom  title="Slidev theme purplin">
+  <Item text="slidevjs/slidev">
+    <carbon:logo-github />
+  </Item>
+  <Item text="Slidevjs">
+    <carbon:logo-twitter />
+  </Item>
+  <Item text="sli.dev">
+    <carbon:link />
+  </Item>
+</BarBottom>
 
 ---
 layout: image-x
@@ -91,14 +97,17 @@ imageOrder: 1
 
 image 600x600
 
-<BarBottom
-  title="Slidev theme purplin"
-  :social="[
-    { type: 'gh', username: 'slidevjs/slidev' },
-    { type: 'tw', username: 'Slidevjs' },
-    { type: 'wb', username: 'sli.dev' }
-  ]"
-/>
+<BarBottom  title="Slidev theme purplin">
+  <Item text="slidevjs/slidev">
+    <carbon:logo-github />
+  </Item>
+  <Item text="Slidevjs">
+    <carbon:logo-twitter />
+  </Item>
+  <Item text="sli.dev">
+    <carbon:link />
+  </Item>
+</BarBottom>
 
 ---
 layout: image-x
@@ -112,14 +121,17 @@ imageOrder: 2
 
 image 1080x1920
 
-<BarBottom
-  title="Slidev theme purplin"
-  :social="[
-    { type: 'gh', username: 'slidevjs/slidev' },
-    { type: 'tw', username: 'Slidevjs' },
-    { type: 'wb', username: 'sli.dev' }
-  ]"
-/>
+<BarBottom  title="Slidev theme purplin">
+  <Item text="slidevjs/slidev">
+    <carbon:logo-github />
+  </Item>
+  <Item text="Slidevjs">
+    <carbon:logo-twitter />
+  </Item>
+  <Item text="sli.dev">
+    <carbon:link />
+  </Item>
+</BarBottom>
 
 ---
 layout: quote
@@ -131,14 +143,17 @@ position: center
 
 'position' variants: left (default), center, right
 
-<BarBottom
-  title="Slidev theme purplin"
-  :social="[
-    { type: 'gh', username: 'slidevjs/slidev' },
-    { type: 'tw', username: 'Slidevjs' },
-    { type: 'wb', username: 'sli.dev' }
-  ]"
-/>
+<BarBottom  title="Slidev theme purplin">
+  <Item text="slidevjs/slidev">
+    <carbon:logo-github />
+  </Item>
+  <Item text="Slidevjs">
+    <carbon:logo-twitter />
+  </Item>
+  <Item text="sli.dev">
+    <carbon:link />
+  </Item>
+</BarBottom>
 
 ---
 
@@ -159,14 +174,17 @@ Slidev is a slides maker and presenter designed for developers, consist of the f
 
 Read more about [Why Slidev?](https://sli.dev/guide/why)
 
-<BarBottom
-  title="Slidev theme purplin"
-  :social="[
-    { type: 'gh', username: 'slidevjs/slidev' },
-    { type: 'tw', username: 'Slidevjs' },
-    { type: 'wb', username: 'sli.dev' }
-  ]"
-/>
+<BarBottom  title="Slidev theme purplin">
+  <Item text="slidevjs/slidev">
+    <carbon:logo-github />
+  </Item>
+  <Item text="Slidevjs">
+    <carbon:logo-twitter />
+  </Item>
+  <Item text="sli.dev">
+    <carbon:link />
+  </Item>
+</BarBottom>
 
 ---
 
@@ -183,14 +201,17 @@ Hover on the bottom-left corner to see the navigation's controls panel
 | <kbd>up</kbd> | previous slide |
 | <kbd>down</kbd> | next slide |
 
-<BarBottom
-  title="Slidev theme purplin"
-  :social="[
-    { type: 'gh', username: 'slidevjs/slidev' },
-    { type: 'tw', username: 'Slidevjs' },
-    { type: 'wb', username: 'sli.dev' }
-  ]"
-/>
+<BarBottom  title="Slidev theme purplin">
+  <Item text="slidevjs/slidev">
+    <carbon:logo-github />
+  </Item>
+  <Item text="Slidevjs">
+    <carbon:logo-twitter />
+  </Item>
+  <Item text="sli.dev">
+    <carbon:link />
+  </Item>
+</BarBottom>
 
 ---
 layout: image-right
@@ -216,14 +237,17 @@ function updateUser(id: number, update: Partial<User>) {
 }
 ```
 
-<BarBottom
-  title="Slidev theme purplin"
-  :social="[
-    { type: 'gh', username: 'slidevjs/slidev' },
-    { type: 'tw', username: 'Slidevjs' },
-    { type: 'wb', username: 'sli.dev' }
-  ]"
-/>
+<BarBottom  title="Slidev theme purplin">
+  <Item text="slidevjs/slidev">
+    <carbon:logo-github />
+  </Item>
+  <Item text="Slidevjs">
+    <carbon:logo-twitter />
+  </Item>
+  <Item text="sli.dev">
+    <carbon:link />
+  </Item>
+</BarBottom>
 
 ---
 layout: center
@@ -234,11 +258,14 @@ class: "text-center"
 
 [Documentations](https://sli.dev) / [GitHub Repo](https://github.com/slidevjs/slidev)
 
-<BarBottom
-  title="Slidev theme purplin"
-  :social="[
-    { type: 'gh', username: 'slidevjs/slidev' },
-    { type: 'tw', username: 'Slidevjs' },
-    { type: 'wb', username: 'sli.dev' }
-  ]"
-/>
+<BarBottom  title="Slidev theme purplin">
+  <Item text="slidevjs/slidev">
+    <carbon:logo-github />
+  </Item>
+  <Item text="Slidevjs">
+    <carbon:logo-twitter />
+  </Item>
+  <Item text="sli.dev">
+    <carbon:link />
+  </Item>
+</BarBottom>