Material Design Inspired Tabs UI Component For Vue


A highly customizable tabs component inspired by Android material design.


  • Horizontal & Vertical tabs.
  • Dark Mode.
  • Slide transitions.
  • Ripple click effect.
  • Dynamic tabs addition.

How to use it:

1. Import the Material Tabs component.

import Vue from "vue";
import Tabs from "vue-material-tabs";

2. Register the component.

// global
// local
import { tabs, tab } from "vue-material-tabs";
export default {
  components: {

3. Create a tabs component in the app.

  <TabItem name="Tab1">
    <div class="first-tab">First tab</div>
  <TabItem name="Tab2">
    <div class="second-tab">Second tab</div>
  <TabItem name="Tab3">
    <div class="last-tab">Last tab</div>

4. Available props to customize the tabs component.

theme: {
  type: [Object, String],
  // default, purple, red, pink, cyan, green
  default: "default",
vertical: Boolean,
ripple: {
  type: Boolean,
  default: true,
slideDuration: {
  type: [String, Number],
  default: 200,
slideVertical: Boolean,
slide: {
  type: Boolean,
  default: true,
navAuto: Boolean,
navSlider: {
  type: Boolean,
  default: true,
noTouch: Boolean,

5. Events.

  • @input: when tab is changed
  • @change: when tab is changed by user interaction


Material Design Inspired Tabs UI Component For Vue


v0.1.6 (07/18/2021)

  • create: model handle

v0.1.5 (06/30/2021)

  • update

v0.1.4 (06/23/2021)

  • update

v0.1.3 (06/21/2021)

  • add: no touch option

v0.1.2 (06/12/2021)

  • Update

v0.1.2 (06/12/2021)

  • Update

v0.1.0 (05/22/2021)

  • fix: slots reactive

v0.0.9 (05/18/2021)

  • Bugfix

Download Details:

Author: jairoblatt

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-material-tabs

$ npm i vue-material-tabs --save

You Might Be Interested In:


Add Comment