Morphing Tabs

This is a morphing tabs interaction, recreated by Preet's work and featuring the gooey effect component.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/morphing-tabs.json"

Copy and paste the following code

MorphingTabs.vue

Prop Name	Type	Default	Description
`class`	`string`	`""`	Additional class names to style the component.
`tabs`	`string[]`	`[]`	Tabs.
`activeTab`	`string`	`""`	Current active Tab.
`margin`	`number`	`20`	Active tab margin left and right.
`blurStdDeviation`	`number`	`6`	Svg blur stdDeviation, tab rounded use it.

On This Page