Underline Tabs

underline x slide

Tabs with sliding underline indicator. From Bundui.

tabsunderlineslidebundui

Code

tabs-underline.tsx

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

export function UnderlineTabs({ tabs }: { tabs: string[] }) {
  const [active, setActive] = useState(0);
  return (
    <div className="inline-flex border-b border-border">
      <div className="relative">
        {tabs.map((t, i) => (
          <button key={t} onClick={() => setActive(i)}
            className={`px-4 py-2 text-sm font-medium ${active === i ? "text-foreground" : "text-muted-foreground"}`}>
            {t}
          </button>
        ))}
        <div className="absolute bottom-0 h-0.5 bg-brand transition-all duration-300"
          style={{ left: `${active * (100 / tabs.length)}%`, width: `${100 / tabs.length}%` }} />
      </div>
    </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 Underline Tabs component and wire it to my accent.”