Skip to main content

​
Overview

Morphing Tabs is a tab component with a unique morphing animation effect featuring a gooey transition between active tabs.

​
Usage

<template>
  <MorphingTabs
    :tabs="['Tab 1', 'Tab 2', 'Tab 3']"
    v-model:activeTab="currentTab"
    :margin="20"
    :blurStdDeviation="6"
  />
</template>

<script setup>
import { ref } from 'vue'
const currentTab = ref('Tab 1')
</script>

​
API Reference

​
Props

Prop NameTypeDefaultDescription
classstring""Additional class names to style the component.
tabsstring[][]Tabs.
activeTabstring""Current active Tab.
marginnumber20Active tab margin left and right.
blurStdDeviationnumber6Svg blur stdDeviation, tab rounded use it.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us