Morph Tabs

New

Tabs whose highlight stretches across like elastic

$ npx @hritik-sharmaa/repeat-ui add commons-morph-tabs

Live preview

Customize

Highlight

Background

Text

Active text

Stretch0.12s

import CommonsMorphTabs from "@/components/repeat-ui/commons-morph-tabs/preview";

<CommonsMorphTabs />

Installation

Run the command
Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.
$ npx @hritik-sharmaa/repeat-ui add commons-morph-tabs --variant ts-tailwind

The files are in components/repeat-ui/commons-morph-tabs/.

import CommonsMorphTabs from "@/components/repeat-ui/commons-morph-tabs/preview";

export default function Page() {
  return <CommonsMorphTabs />;
}

Prop	Type	Default	Description
`tabs`	`string[]`	["Overview", "Components", "Pricing", "Docs"]	Tab labels.
`defaultIndex`	`number`	0	The tab selected at first.
`onChange`	`(index: number) => void`	-	Called with the selected tab's index.
`accentColor`	`string`	"#fa5f1b"	Highlight colour.
`background`	`string`	"#171717"	Bar background.
`textColor`	`string`	"#a3a3a3"	Tab text colour.
`activeTextColor`	`string`	"#ffffff"	Selected tab's text colour.
`stretch`	`number`	0.12	Seconds the trailing edge waits; higher stretches more.
`className`	`string`	""	Extra classes for the root element.