Tabs Subtle

Navigation 22

About

Horizontal tab navigation with proximity-based hover, an animated pill selection indicator, and fluid variable-font-weight transitions, built on Radix Tabs. Ported from Fluid Functionalism by Micka Touillaud.

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

Code

How Tabs Subtle is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import {
  TabsSubtle,
  TabsSubtleItem,
  TabsSubtlePanel,
} from "@/components/ui/tabs-subtle";

const tabs = ["Teamspaces", "Recents", "Favorites", "Shared"];

export default function TabsSubtleDemo() {
  const [selected, setSelected] = React.useState(0);

  return (
    <div className="flex min-h-[240px] w-full items-start justify-center bg-background p-8">
      <div className="flex w-full max-w-md flex-col gap-4">
        <TabsSubtle
          selectedIndex={selected}
          onSelect={setSelected}
          idPrefix="tabs-subtle-demo"
        >
          {tabs.map((label, index) => (
            <TabsSubtleItem key={label} label={label} index={index} />
          ))}
        </TabsSubtle>
        {tabs.map((label, index) => (
          <TabsSubtlePanel
            key={label}
            index={index}
            selectedIndex={selected}
            idPrefix="tabs-subtle-demo"
          >
            <p className="text-muted-foreground px-3 text-[13px]">
              {label} content goes here.
            </p>
          </TabsSubtlePanel>
        ))}
      </div>
    </div>
  );
}