'use client'; import * as React from 'react'; import { AnimatePresence, motion } from 'motion/react'; import { cn } from '@/lib/utils'; import type { LucideIcon } from 'lucide-react'; interface TabItem { id: string; title: string; icon?: LucideIcon; content?: React.ReactNode; cardContent?: React.ReactNode; color: string; } interface SmoothTabProps { items?: TabItem[]; defaultTabId?: string; className?: string; activeColor?: string; onChange?: (tabId: string) => void; } const DEFAULT_TABS: TabItem[] = [ { id: 'Models', title: 'Models', color: 'bg-sky-500', cardContent: ( ), }, { id: 'MCPs', title: 'MCPs', color: 'bg-violet-500', cardContent: ( ), }, { id: 'Agents', title: 'Agents', color: 'bg-emerald-500', cardContent: ( ), }, { id: 'Users', title: 'Users', color: 'bg-amber-500', cardContent: ( ), }, ]; function PanelLayout({ label, description, chips, }: { label: string; description: string; chips: string[]; }) { return (

{/* Soft gradient blobs */}

{/* Corner lines */}

{label}

{description}

{chips.map((chip) => ( {chip} ))}

); } const panelVariants = { enter: (direction: number) => ({ x: direction > 0 ? 24 : -24, opacity: 0, filter: 'blur(6px)', scale: 0.98, }), center: { x: 0, opacity: 1, filter: 'blur(0px)', scale: 1, }, exit: (direction: number) => ({ x: direction < 0 ? 24 : -24, opacity: 0, filter: 'blur(6px)', scale: 0.98, }), }; const panelTransition = { duration: 0.35, ease: [0.32, 0.72, 0, 1], }; export default function SmoothTab({ items = DEFAULT_TABS, defaultTabId = DEFAULT_TABS[0].id, className, activeColor = 'bg-[#1F9CFE]', onChange, }: SmoothTabProps) { const [selected, setSelected] = React.useState(defaultTabId); const [direction, setDirection] = React.useState(0); const selectedIndex = items.findIndex((item) => item.id === selected); const selectedItem = items[selectedIndex] ?? items[0]; const handleTabClick = (tabId: string) => { const currentIndex = items.findIndex((item) => item.id === selected); const newIndex = items.findIndex((item) => item.id === tabId); setDirection(newIndex > currentIndex ? 1 : -1); setSelected(tabId); onChange?.(tabId); }; const handleKeyDown = ( e: React.KeyboardEvent, tabId: string, ) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleTabClick(tabId); } }; return (

{/* LEFT: Vertical pill nav */}

{items.map((item) => { const isActive = item.id === selected; const Icon = item.icon; const tabColor = item.color || activeColor; return ( ); })}

{/* RIGHT: Panel area */}

{/* subtle grid overlay */}

{selectedItem.cardContent ?? ( )}

); }

Smooth Tab

Models

Installation

Usage