Fluid Tabs

fluid x morph

Tabs with fluid morphing pill indicator. From Animata.

tabsfluidmorphanimata

Code

tabs-fluid.tsx

"use client";
import { useState } from "react";

export function FluidTabs({ tabs }: { tabs: string[] }) {
  const [active, setActive] = useState(0);
  return (
    <div className="inline-flex rounded-lg bg-muted p-1">
      {tabs.map((t, i) => (
        <button key={t} onClick={() => setActive(i)}
          className={`relative rounded-md px-4 py-1.5 text-sm font-medium ${active === i ? "text-foreground" : "text-muted-foreground"}`}>
          {active === i && <span className="absolute inset-0 rounded-md bg-background shadow-sm" />}
          <span className="relative z-10">{t}</span>
        </button>
      ))}
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Fluid Tabs component and wire it to my accent.”