A lightweight, highly customizable’s Vue component to help user step by step focus on the page.


๐Ÿš€ Features

  • โšก Lightweight: Bundle size <3kb when gzipped.
  • ๐Ÿงฉ Customizable: Configurable z-index to fit any project.
  • ๐Ÿ‘ Vue Component: Work for Vue 2 and Vue 3.
  • ๐Ÿงถ Highlighting multiple element: Support highlighting single or multiple element on a step.
  • ๐Ÿ”Œ Flexible: Support no hint, single hint, multiple hint on a step and single hint corresponds multiple highlight.
  • ๐Ÿฆพ Type Strong: Written in TypeScript.

๐ŸŽ Usage

          selector: '#get-started',
          hint: { text: 'This is a hint', position: 'bottom' },

<script setup lang="ts">
import 'mt-step/css'
import { MtStep, MtStepItem } from 'mt-step'

Refer to documentations for more details.

๐Ÿ“ฆ Install

yarn add mt-step


View Github