Matte Tabs Navigation

An animated underline tab list with a sliding indicator, keyboard navigation and ARIA tab/tabpanel roles for switching between sections of content.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Matte Tabs Navigation to your project and fits it to your theme.

import MatteTabsNavigation from "@/components/ui/matte-tabs-navigation";

export default function MatteTabsNavigationDemo() {
  return (
    <div className="flex w-full h-screen items-center justify-center bg-[#edf0f1]">
      <MatteTabsNavigation />
    </div>
  );
}