Navigation

Animated Tab Bar

#tabs#animated#bottom-bar

implementedInfinityUI component

This component is fully implemented in InfinityUI and wired into the docs and registry flow.

Installation

Use the registry command to add the component source, and install any package dependencies if needed.

Infinity Registry

Install the component source into your project with the shadcn CLI.

npx shadcn@latest add https://infinityui-pearl.vercel.app/r/animated-tab-bar

Package Dependencies

Install the npm packages used by this component source.

npm install framer-motion

Component Code

Copy and paste this code into your component file.

tsx

"use client";

import { useState } from "react";
import { motion } from "framer-motion";

interface Tab {
    id: string;
    label: string;
}

interface AnimatedTabBarProps {
    tabs: Tab[];
}

export function AnimatedTabBar({ tabs }: AnimatedTabBarProps) {
    const [activeTab, setActiveTab] = useState(tabs[0].id);

    return (
        <div className="flex items-center gap-1 p-1 rounded-full bg-zinc-900 border border-white/10 shadow-xl overflow-hidden pointer-events-auto">
            {tabs.map((tab) => {
                const isActive = activeTab === tab.id;
                return (
                    <button
                        key={tab.id}
                        onClick={() => setActiveTab(tab.id)}
                        className={`relative px-4 py-2 rounded-full text-sm font-medium transition-colors duration-300 outline-none ${isActive ? "text-zinc-900" : "text-zinc-400 hover:text-white"
                            }`}
                    >
                        {isActive && (
                            <motion.div
                                layoutId="active-tab"
                                className="absolute inset-0 bg-white rounded-full"
                                transition={{ type: "spring", stiffness: 500, damping: 35 }}
                                style={{ transformOrigin: "center" }}
                            />
                        )}
                        <span className="relative z-10">{tab.label}</span>
                    </button>
                );
            })}
        </div>
    );
}