Floating Tabs

A modern tab navigation component featuring a fluid animated background indicator that smoothly transitions between active tabs with spring physics.

Preview

Install the component using the CLI.

$npx shadcn@latest add https://ankurz.me/r/floating-tabs.json

Import the component:

import { FloatingTabs } from "@/components/floating-tabs"

Use it in your code:

<FloatingTabs 
  defaultValue="tab1"
  tabs={[
    { value: "tab1", label: "Tab 1" },
    { value: "tab2", label: "Tab 2" }
  ]}
/>

Property	Type	Default	Description
`tabs*`	`array`	`-`	Array of tab objects with value, label, and content properties.
`defaultValue`	`string`	`tabs[0].value`	The default active tab value.
`onChange`	`function`	`undefined`	Callback function called when tab changes. Receives the new tab value.
`className`	`string`	`""`	Additional CSS classes to apply to the container.