{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "tabs-morph",
  "type": "registry:ui",
  "title": "Morphing Spring Pill Tabs",
  "description": "Fluid layoutId morphing background indicator tabs with tactile spring motion.",
  "category": "navigation",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "navigation",
    "tabs",
    "segmented",
    "morph"
  ],
  "files": [
    {
      "path": "registry/navigation/tabs-morph/tabs-morph.tsx",
      "type": "registry:ui",
      "target": "components/ui/tabs-morph.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion } from 'framer-motion';\nimport { Code, Eye, Waveform, Gear } from '@phosphor-icons/react';\n\ninterface TabItem {\n  id: string;\n  label: string;\n  icon: React.ReactNode;\n  badge?: string;\n}\n\ninterface TabsMorphProps {\n  className?: string;\n  defaultTab?: string;\n  onChange?: (id: string) => void;\n}\n\nconst DEFAULT_TABS: TabItem[] = [\n  { id: 'preview', label: 'Preview', icon: <Eye size={15} /> },\n  { id: 'code', label: 'Source Code', icon: <Code size={15} /> },\n  { id: 'effects', label: 'Shader FX', icon: <Waveform size={15} />, badge: 'NEW' },\n  { id: 'settings', label: 'Inspector', icon: <Gear size={15} /> },\n];\n\nexport const TabsMorph: React.FC<TabsMorphProps> = ({\n  className = '',\n  defaultTab = 'preview',\n  onChange,\n}) => {\n  const [activeTab, setActiveTab] = useState(defaultTab);\n\n  const handleSelect = (id: string) => {\n    setActiveTab(id);\n    onChange?.(id);\n  };\n\n  return (\n    <div className={`inline-flex items-center p-1.5 rounded-2xl bg-zinc-900/80 border border-white/10 backdrop-blur-xl shadow-lg ${className}`}>\n      {DEFAULT_TABS.map((tab) => {\n        const isActive = activeTab === tab.id;\n        return (\n          <button\n            key={tab.id}\n            onClick={() => handleSelect(tab.id)}\n            className={`relative flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-medium transition-colors duration-200 cursor-pointer select-none ${\n              isActive ? 'text-white' : 'text-zinc-400 hover:text-zinc-200'\n            }`}\n          >\n            {/* Morphing Background Pill */}\n            {isActive && (\n              <motion.div\n                layoutId=\"activeTabMorph\"\n                transition={{ type: 'spring', stiffness: 450, damping: 32 }}\n                className=\"absolute inset-0 rounded-xl bg-gradient-to-r from-indigo-600/80 to-violet-600/80 border border-indigo-400/30 shadow-md shadow-indigo-500/20\"\n              />\n            )}\n\n            <span className=\"relative z-10 flex items-center gap-1.5\">\n              {tab.icon}\n              {tab.label}\n              {tab.badge && (\n                <span className=\"px-1.5 py-0.2 rounded text-[9px] font-mono font-bold bg-pink-500/20 text-pink-300 border border-pink-500/30\">\n                  {tab.badge}\n                </span>\n              )}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}