diff --git a/docs/components/tab-panel/index.hbs b/docs/components/tab-panel/index.hbs
new file mode 100644
index 00000000..e8aafa1e
--- /dev/null
+++ b/docs/components/tab-panel/index.hbs
@@ -0,0 +1,32 @@
+---
+title: Tab Panel
+description: Description of how to deal with tab panel in your app.
+nav: side/components/tab-panel
+order: 1
+toc:
+  - title: Default Tab Panel
+    slug: tab-panel-default
+  - title: Full-width Tab Panel
+    slug: tab-panel-fullwidth
+---
+
+{{#> page}}
+  {{#*inline "content"}}
+    <h1 class="h2">{{title}}</h1>
+    <p class="lead">
+      Tab panels can be used to segment the screens, to make a step-by-step wizard, ...
+    </p>
+
+    {{> table-of-contents data=toc}}
+    
+    <h2 class="h3" id="tab-panel-default">Default Tab panel</h2>
+
+    {{> example path="/components/tab-panel/demos/tab-panel-default.html"}}
+    {{#code-snippet "html"}}{{#get snippets "/components/tab-panel/snippets/tab-panel-default"}}{{{.}}}{{/get}}{{/code-snippet}}
+
+    <h2 class="h3" id="tab-panel-fullwidth">Full-width Tab panel</h2>
+
+    {{> example path="/components/tab-panel/demos/tab-panel-fullwidth.html"}}
+    {{#code-snippet "html"}}{{#get snippets "/components/tab-panel/snippets/tab-panel-fullwidth"}}{{{.}}}{{/get}}{{/code-snippet}}
+  {{/inline}}
+{{/page}}
diff --git a/docs/components/tab-panel/snippets/tab-panel-default.hbs b/docs/components/tab-panel/snippets/tab-panel-default.hbs
new file mode 100644
index 00000000..58dac6c4
--- /dev/null
+++ b/docs/components/tab-panel/snippets/tab-panel-default.hbs
@@ -0,0 +1,24 @@
+---
+title: Tab Panel - Default
+layout: demo.hbs
+---
+<div class="tab-panel">
+  <div class="tab-panel__header">
+    <div class="tab-panel__header__tabs">
+      <div class="tab-panel__header__tab">Tab A</div>
+      <div class="tab-panel__header__tab is-active">Tab B</div>
+      <div class="tab-panel__header__tab">Tab C</div>
+      <div class="tab-panel__header__tab">Tab D</div>
+      <div class="tab-panel__header__tab">Tab E</div>
+      <div class="tab-panel__header__tab">Tab F</div>
+    </div>
+  </div>
+  <div class="tab-panel__content">
+    <div class="tab-panel__content__tab">Content A</div>
+    <div class="tab-panel__content__tab is-active">Content B</div>
+    <div class="tab-panel__content__tab">Content C</div>
+    <div class="tab-panel__content__tab">Content D</div>
+    <div class="tab-panel__content__tab">Content E</div>
+    <div class="tab-panel__content__tab">Content F</div>
+  </div>
+</div>
diff --git a/docs/components/tab-panel/snippets/tab-panel-fullwidth.hbs b/docs/components/tab-panel/snippets/tab-panel-fullwidth.hbs
new file mode 100644
index 00000000..226be439
--- /dev/null
+++ b/docs/components/tab-panel/snippets/tab-panel-fullwidth.hbs
@@ -0,0 +1,24 @@
+---
+title: Tab Panel - Full Width
+layout: demo.hbs
+---
+<div class="tab-panel">
+  <div class="tab-panel__header">
+    <div class="tab-panel__header__tabs">
+      <div class="tab-panel__header__tab">Tab A</div>
+      <div class="tab-panel__header__tab is-active">Tab B</div>
+      <div class="tab-panel__header__tab">Tab C</div>
+      <div class="tab-panel__header__tab">Tab D</div>
+      <div class="tab-panel__header__tab">Tab E</div>
+      <div class="tab-panel__header__tab">Tab F</div>
+    </div>
+  </div>
+  <div class="tab-panel__content tab-panel__content__tab__fullwidth-content">
+    <div class="tab-panel__content__tab">Content A</div>
+    <div class="tab-panel__content__tab is-active">Content B</div>
+    <div class="tab-panel__content__tab">Content C</div>
+    <div class="tab-panel__content__tab">Content D</div>
+    <div class="tab-panel__content__tab">Content E</div>
+    <div class="tab-panel__content__tab">Content F</div>
+  </div>
+</div>