diff --git a/package.json b/package.json
index 37c1603b..d45f99ee 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "vue-content-loader": "^0.2.1",
     "vue-router": "^3.0.1",
     "vue-router-prefetch": "^1.1.1",
+    "vue-slim-tabs": "^0.3.0",
     "vue-template-compiler": "^2.6.10",
     "vuex": "^3.0.1",
     "vuex-router-sync": "^5.0.0"
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
new file mode 100644
index 00000000..b2d50895
--- /dev/null
+++ b/src/components/Tabs.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <other-tabs>
+      <tab
+        v-for="(item, index) in all"
+        :key="item.title + item.body"
+        :title="item.title"
+        v-html="transformed[index]"
+      >
+      </tab>
+    </other-tabs>
+  </div>
+</template>
+
+<script>
+import {Tabs as otherTabs, Tab} from 'vue-slim-tabs'
+import inlineRender from '../utils/inlineRender'
+
+export default {
+  name: 'Tabs',
+  data() {
+    return {
+      transformed: []
+    }
+  },
+  created() {
+    const that = this
+    const {all} = this
+    Promise.all(
+      all.map(x => {
+        const {codeBlock, markdown, body} = x
+        const nl = '\n'
+        if (codeBlock) {
+          const a = inlineRender('```' + codeBlock + nl + body + nl + '```')
+          return a
+        }
+        if (markdown) {
+          return inlineRender(body)
+        }
+        return body
+      })
+    ).then(x => {
+      that.transformed = x
+    })
+  },
+  components: {
+    otherTabs,
+    Tab
+  },
+  props: {
+    all: {
+      type: Array,
+      required: true
+    }
+  }
+}
+</script>
+
+<style src="vue-slim-tabs/themes/default.css"></style>
diff --git a/src/index.js b/src/index.js
index 8d58e0d9..389be4a9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,6 +11,7 @@ import Badge from './components/Badge.vue'
 import DocuteSelect from './components/DocuteSelect.vue'
 import Note from './components/Note.vue'
 import Gist from './components/Gist.vue'
+import Tabs from './components/Tabs.vue'
 import Loading from './components/Loading.vue'
 import ExternalLinkIcon from './components/icons/ExternalLinkIcon.vue'
 import {INITIAL_STATE_NAME} from './utils/constants'
@@ -23,6 +24,7 @@ import bannerFooter from './plugins/banner-footer'
 import darkThemeToggler from './plugins/dark-theme-toggler'
 import searchPlugin from './plugins/search'
 
+Vue.component(Tabs.name, Tabs)
 Vue.component(ImageZoom.name, ImageZoom)
 Vue.component(Badge.name, Badge)
 Vue.component(DocuteSelect.name, DocuteSelect)
diff --git a/src/utils/inlineRender.js b/src/utils/inlineRender.js
new file mode 100644
index 00000000..e82920c1
--- /dev/null
+++ b/src/utils/inlineRender.js
@@ -0,0 +1,22 @@
+import hooks from '../hooks'
+import markedRenderer from './markedRenderer'
+import marked from './marked'
+import highlight from './highlight'
+
+async function inlineRender(iContent) {
+  let content = await hooks.processPromise('processMarkdown', iContent)
+  const env = {
+    headings: [],
+    mixins: [],
+    config: {}
+  }
+  content = marked(content, {
+    renderer: markedRenderer(hooks),
+    highlight,
+    env
+  })
+  content = await hooks.processPromise('processHTML', content)
+  return content
+}
+
+export default inlineRender
diff --git a/website/docs/builtin-components.md b/website/docs/builtin-components.md
index c9bec423..a89cbebc 100644
--- a/website/docs/builtin-components.md
+++ b/website/docs/builtin-components.md
@@ -204,3 +204,87 @@ Your favorite fruit: {{ favoriteFruit }}
 A hack for using `<style>` and `<script>` tags Vue template.
 
 In general you don't need to use them directly, since we automatically convert `<style>` and `<script>` tags in Markdown to these components.
+
+
+## `<Tabs>`
+
+Window menu in tabs. If choosing codeBlock entire body is treated as code block. Some headings look bad when parsed as markdown. Pure html is supported if markdown is false. Pay attention to the fact that backticks are used for passing body arguments, and that there's no space between opening backtick and next character of body.
+
+| Prop | Type     | Default | Description |
+| ---- | -------- | ------- | ----------- |
+| all   | `array` | N/A     | Array of objects     |
+| all.title   | `string` | N/A     | Tab name    |
+| all.body   | `string` | N/A     | Tab body    |
+| all.codeBlock   | `string` | N/A     | Type of highlighting    |
+| all.markdown   | `boolean` | false     | Parse as markdown    |
+Example:
+
+```markdown
+<Tabs 
+  v-bind:all="[
+    {
+      title: 'mixed',
+      body: 
+`##### will equal 444
+\`\`\`js
+const a= 123
+const b = 321
+return a + b
+\`\`\`
+      `,
+      markdown: 'true',
+    },
+    {
+      title: 'markdown',
+      body: 
+`### asdf
+*sdf*`,
+      markdown: 'true',
+    },
+    {
+      title: 'javascript',
+      body: 
+`const a= 123
+const b = 321
+return a + b
+      `,
+      codeBlock: 'js',
+    },
+  ]"
+/>
+```
+
+<Tabs 
+  v-bind:all="[
+    {
+      title: 'mixed',
+      body: 
+`##### will equal 444
+\`\`\`js
+const a= 123
+const b = 321
+return a + b
+\`\`\`
+      `,
+      markdown: 'true',
+    },
+    {
+      title: 'markdown',
+      body: 
+`### asdf
+*sdf*`,
+      markdown: 'true',
+    },
+    {
+      title: 'javascript',
+      body: 
+`const a= 123
+const b = 321
+return a + b
+      `,
+      codeBlock: 'js',
+    },
+  ]"
+/>
+
+
diff --git a/yarn.lock b/yarn.lock
index e8c4c204..e4740e86 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12441,6 +12441,11 @@ vue-router@^3.0.1:
   resolved "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"
   integrity sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg==
 
+vue-slim-tabs@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/vue-slim-tabs/-/vue-slim-tabs-0.3.0.tgz#5930addbbac27feded2a3e6ecbe4579418acf283"
+  integrity sha512-0KaQRcql5ihRHTwvguWw1vxYnxuChLkhXu6AEp0TEHKm2Ax4Y5HL58AhVHZCyNXhRwDK3J+Fh0jzoOR0VI7j7Q==
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"