MazTimeline

MazTimeline is a step/progress timeline component for Vue 3 with support for horizontal, vertical, and responsive layouts, customizable colors, sizes, step states, and scoped slots

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

Basic usage

Account

Create your account

2

Profile

Set up your profile

3

Settings

Configure preferences

4

Complete

All done!

<template>
  <MazTimeline v-model="currentStep" :steps="steps" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import MazTimeline from 'maz-ui/components/MazTimeline'

  const currentStep = ref(1)
  const steps = [
    { title: 'Account', subtitle: 'Create your account' },
    { title: 'Profile', subtitle: 'Set up your profile' },
    { title: 'Settings', subtitle: 'Configure preferences' },
    { title: 'Complete', subtitle: 'All done!' },
  ]
</script>

Directions

Horizontal

Account

Create your account

2

Profile

Set up your profile

3

Settings

Configure preferences

4

Complete

All done!

<template>
  <MazTimeline v-model="currentStep" :steps="steps" direction="horizontal" />
</template>

Vertical

Account

Create your account

2

Profile

Set up your profile

3

Settings

Configure preferences

4

Complete

All done!

<template>
  <MazTimeline v-model="currentStep" :steps="steps" direction="vertical" />
</template>

Auto (responsive)

The default direction is 'auto', which switches from horizontal to vertical based on the breakpoint prop (default: '768px').

Account

Create your account

2

Profile

Set up your profile

3

Settings

Configure preferences

4

Complete

All done!

<template>
  <MazTimeline
    v-model="currentStep"
    :steps="steps"
    direction="auto"
    breakpoint="768px"
  />
</template>

Colors

Use the color prop to change the theme color.

Step 1

2

Step 2

3

Step 3

Step 1

2

Step 2

3

Step 3

Step 1

2

Step 2

3

Step 3

Step 1

2

Step 2

3

Step 3

Step 1

2

Step 2

3

Step 3

Step 1

2

Step 2

3

Step 3

<template>
  <MazTimeline :steps="steps" color="primary" />
  <MazTimeline :steps="steps" color="secondary" />
  <MazTimeline :steps="steps" color="info" />
  <MazTimeline :steps="steps" color="success" />
  <MazTimeline :steps="steps" color="warning" />
  <MazTimeline :steps="steps" color="destructive" />
</template>

Sizes

Use the size prop to change the indicator size.

Step 1

2

Step 2

3

Step 3

Step 1

2

Step 2

3

Step 3

Step 1

2

Step 2

3

Step 3

Step 1

2

Step 2

3

Step 3

Step 1

2

Step 2

3

Step 3

Step 1

2

Step 2

3

Step 3

<template>
  <MazTimeline :steps="steps" size="mini" />
  <MazTimeline :steps="steps" size="xs" />
  <MazTimeline :steps="steps" size="sm" />
  <MazTimeline :steps="steps" size="md" />
  <MazTimeline :steps="steps" size="lg" />
  <MazTimeline :steps="steps" size="xl" />
</template>

Step states

Each step can have a manual state property: 'completed', 'active', 'error', 'warning', or 'pending'.

Completed

Step finished

2

Active

In progress

3

Error

Something went wrong

4

Warning

Needs attention

5

Pending

Not started

<template>
  <MazTimeline :steps="stateSteps" direction="horizontal" />
</template>

<script lang="ts" setup>
  const stateSteps = [
    { title: 'Completed', subtitle: 'Step finished', state: 'completed' },
    { title: 'Active', subtitle: 'In progress', state: 'active' },
    { title: 'Error', subtitle: 'Something went wrong', state: 'error' },
    { title: 'Warning', subtitle: 'Needs attention', state: 'warning' },
    { title: 'Pending', subtitle: 'Not started', state: 'pending' },
  ]
</script>

Clickable

Enable clickable to allow users to navigate between steps by clicking on them. The click-step event is emitted with the step index.

1

Account

Create your account

2

Profile

Set up your profile

3

Settings

Configure preferences

4

Complete

All done!

<template>
  <MazTimeline v-model="clickableStep" :steps="steps" clickable />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const clickableStep = ref(0)
</script>

Disabled steps

Individual steps can be disabled by setting disabled: true on the step object.

Account

Create your account

2

Profile

Set up your profile

3

Settings

Locked

4

Complete

All done!

<template>
  <MazTimeline v-model="currentStep" :steps="disabledSteps" clickable />
</template>

<script lang="ts" setup>
  const disabledSteps = [
    { title: 'Account', subtitle: 'Create your account' },
    { title: 'Profile', subtitle: 'Set up your profile' },
    { title: 'Settings', subtitle: 'Locked', disabled: true },
    { title: 'Complete', subtitle: 'All done!' },
  ]
</script>

Without step numbers

Hide the step numbers inside indicators with :show-step-numbers="false".

Account

Create your account

Profile

Set up your profile

Settings

Configure preferences

Complete

All done!

<template>
  <MazTimeline
    v-model="currentStep"
    :steps="steps"
    :show-step-numbers="false"
  />
</template>

Without auto-validate

By default, completed steps show a checkmark. Disable this with :auto-validate-steps="false".

1

Account

Create your account

2

Profile

Set up your profile

3

Settings

Configure preferences

4

Complete

All done!

<template>
  <MazTimeline
    :model-value="2"
    :steps="steps"
    :auto-validate-steps="false"
  />
</template>

Rounded sizes

Customize the indicator border radius with the rounded-size prop.

Step 1

2

Step 2

3

Step 3

Step 1

2

Step 2

3

Step 3

Step 1

2

Step 2

3

Step 3

Step 1

2

Step 2

3

Step 3

Step 1

2

Step 2

3

Step 3

<template>
  <MazTimeline :steps="steps" rounded-size="full" />
  <MazTimeline :steps="steps" rounded-size="lg" />
  <MazTimeline :steps="steps" rounded-size="md" />
  <MazTimeline :steps="steps" rounded-size="sm" />
  <MazTimeline :steps="steps" rounded-size="none" />
</template>

Custom slots

MazTimeline provides scoped slots for full customization.

Indicator slot

1.

Account

Create your account

2.

Profile

Set up your profile

3.

Settings

Configure preferences

4.

Complete

All done!

<template>
  <MazTimeline v-model="currentStep" :steps="steps">
    <template #indicator="{ step, index, state }">
      <span style="font-size: 1.2em">{{ index + 1 }}.</span>
    </template>
  </MazTimeline>
</template>

Content slot

Account

Step 1 - completed

2

Profile

Step 2 - active

3

Settings

Step 3 - pending

4

Complete

Step 4 - pending

<template>
  <MazTimeline v-model="currentStep" :steps="steps">
    <template #content="{ step, index, state }">
      <div class="maz-text-center">
        <strong>{{ step.title }}</strong>
        <p class="maz-text-muted maz-text-sm maz-m-0">
          Step {{ index + 1 }} - {{ state }}
        </p>
      </div>
    </template>
  </MazTimeline>
</template>

Connector slot

Account

Create your account

---

2

Profile

Set up your profile

---

3

Settings

Configure preferences

---

4

Complete

All done!

<template>
  <MazTimeline v-model="currentStep" :steps="steps">
    <template #connector="{ index, state }">
      <div class="maz-text-center maz-text-xs maz-text-muted">---</div>
    </template>
  </MazTimeline>
</template>

Props

Name	Description	Type	Required	Default	Possible values
model-value	Index of the active step (v-model)	number	No	undefined	-
steps	Array of timeline steps to display	MazTimelineItem[]	Yes	undefined	-
direction	Layout direction of the timeline - 'horizontal': always horizontal - 'vertical': always vertical - 'auto': horizontal above breakpoint, vertical below	MazTimelineDirection	No	auto	'horizontal' | 'vertical' | 'auto'
breakpoint	CSS media breakpoint for auto direction (below this value → vertical)	string	No	768px	-
color	Color theme for active and completed steps	MazTimelineColor	No	primary	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast'
size	Size of the step indicators and typography	MazSize	No	md	'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
show-step-numbers	Show step numbers inside the indicators	boolean	No	true	-
auto-validate-steps	Automatically show a checkmark icon for completed steps	boolean	No	true	-
clickable	Enable click interaction on steps	boolean	No	false	-
animated	Enable animations (pulse on active, state transitions, connector progress)	boolean	No	true	-
rounded-size	Border radius of step indicators	MazTimelineRoundedSize	No	full	'none' | 'sm' | 'md' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'

Events

Event name	Properties	Description
update:modelValue	value mixed - The new active step index	Emitted when the active step changes
click-step	payload mixed - The step data and its index	Emitted when a clickable step is clicked

Slots

Name	Description	Bindings
indicator	Custom content for the step indicator circle	step MazTimelineItem - The step data index number - The step index state MazTimelineStepState - The resolved step state
content	Full custom content area replacing title and subtitle	step MazTimelineItem - The step data index number - The step index state MazTimelineStepState - The resolved step state
title	Custom title content	step MazTimelineItem - The step data index number - The step index state MazTimelineStepState - The resolved step state
subtitle	Custom subtitle content	step MazTimelineItem - The step data index number - The step index state MazTimelineStepState - The resolved step state
connector	Custom connector between steps	index number - The index of the step before this connector