{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "vertical-tabs",
  "title": "Vertical Tabs",
  "description": "A vertical tab interaction with smooth content switching.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/vertical-tabs.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useState, useEffect, useCallback } from \"react\";\r\nimport { motion, AnimatePresence } from \"motion/react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { ArrowLeft01Icon, ArrowRight01Icon } from \"@hugeicons/core-free-icons\";\r\nimport { HugeiconsIcon } from \"@hugeicons/react\";\r\n\r\n// Change Here\r\nconst SERVICES = [\r\n  {\r\n    id: \"01\",\r\n    title: \"Web Design\",\r\n    description:\r\n      \"Creating beautiful, functional, and user-centric digital experiences.\",\r\n    image:\r\n      \"https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=1200\",\r\n  },\r\n  {\r\n    id: \"02\",\r\n    title: \"Framer Development\",\r\n    description: \"Building high-performance, animated websites with Framer.\",\r\n    image:\r\n      \"https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?q=80&w=1200\",\r\n  },\r\n  {\r\n    id: \"03\",\r\n    title: \"Branding\",\r\n    description:\r\n      \"Defining your brand's visual identity and voice for a lasting impression.\",\r\n    image:\r\n      \"https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=1200\",\r\n  },\r\n];\r\n\r\nconst AUTO_PLAY_DURATION = 5000;\r\n\r\nexport default function VerticalTabs() {\r\n  const [activeIndex, setActiveIndex] = useState(0);\r\n  const [direction, setDirection] = useState(0);\r\n  const [isPaused, setIsPaused] = useState(false);\r\n\r\n  const handleNext = useCallback(() => {\r\n    setDirection(1);\r\n    setActiveIndex((prev) => (prev + 1) % SERVICES.length);\r\n  }, []);\r\n\r\n  const handlePrev = useCallback(() => {\r\n    setDirection(-1);\r\n    setActiveIndex((prev) => (prev - 1 + SERVICES.length) % SERVICES.length);\r\n  }, []);\r\n\r\n  const handleTabClick = (index: number) => {\r\n    if (index === activeIndex) return;\r\n    setDirection(index > activeIndex ? 1 : -1);\r\n    setActiveIndex(index);\r\n    setIsPaused(false);\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (isPaused) return;\r\n\r\n    const interval = setInterval(() => {\r\n      handleNext();\r\n    }, AUTO_PLAY_DURATION);\r\n\r\n    return () => clearInterval(interval);\r\n  }, [activeIndex, isPaused, handleNext]);\r\n\r\n  const variants = {\r\n    enter: (direction: number) => ({\r\n      y: direction > 0 ? \"-100%\" : \"100%\",\r\n      opacity: 0,\r\n    }),\r\n    center: {\r\n      zIndex: 1,\r\n      y: 0,\r\n      opacity: 1,\r\n    },\r\n    exit: (direction: number) => ({\r\n      zIndex: 0,\r\n      y: direction > 0 ? \"100%\" : \"-100%\",\r\n      opacity: 0,\r\n    }),\r\n  };\r\n\r\n  return (\r\n    <section className=\"w-full bg-background py-8 md:py-16 lg:py-24\">\r\n      <div className=\"w-full px-4 md:px-8 lg:px-12 xl:px-20 mx-auto\">\r\n        <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start\">\r\n          {/* Left Column: Content */}\r\n          <div className=\"lg:col-span-5 flex flex-col justify-center order-2 lg:order-1 pt-4\">\r\n            <div className=\"space-y-1 mb-12\">\r\n              <h2 className=\"tracking-tighter text-balance text-3xl font-medium md:text-4xl lg:text-5xl text-foreground\">\r\n                How I can help you\r\n              </h2>\r\n              <span className=\"text-[10px] font-medium text-muted-foreground uppercase tracking-[0.3em] block ml-0.5\">\r\n                (SERVICES)\r\n              </span>\r\n            </div>\r\n\r\n            <div className=\"flex flex-col space-y-0\">\r\n              {SERVICES.map((service, index) => {\r\n                const isActive = activeIndex === index;\r\n                return (\r\n                  <button\r\n                    key={service.id}\r\n                    onClick={() => handleTabClick(index)}\r\n                    className={cn(\r\n                      \"group relative flex items-start gap-4 py-6 md:py-8 text-left transition-all duration-500 border-t border-border/50 first:border-0\",\r\n                      isActive\r\n                        ? \"text-foreground\"\r\n                        : \"text-muted-foreground/60 hover:text-foreground\"\r\n                    )}\r\n                  >\r\n                    <div className=\"absolute left-[-16px] md:left-[-24px] top-0 bottom-0 w-[2px] bg-muted\">\r\n                      {isActive && (\r\n                        <motion.div\r\n                          key={`progress-${index}-${isPaused}`}\r\n                          className=\"absolute top-0 left-0 w-full bg-foreground origin-top\"\r\n                          initial={{ height: \"0%\" }}\r\n                          animate={\r\n                            isPaused ? { height: \"0%\" } : { height: \"100%\" }\r\n                          }\r\n                          transition={{\r\n                            duration: AUTO_PLAY_DURATION / 1000,\r\n                            ease: \"linear\",\r\n                          }}\r\n                        />\r\n                      )}\r\n                    </div>\r\n\r\n                    <span className=\"text-[9px] md:text-[10px] font-medium mt-1 tabular-nums opacity-50\">\r\n                      /{service.id}\r\n                    </span>\r\n\r\n                    <div className=\"flex flex-col gap-2 flex-1\">\r\n                      <span\r\n                        className={cn(\r\n                          \"text-2xl md:text-3xl lg:text-4xl font-normal tracking-tight transition-colors duration-500\",\r\n                          isActive ? \"text-foreground\" : \"\"\r\n                        )}\r\n                      >\r\n                        {service.title}\r\n                      </span>\r\n\r\n                      <AnimatePresence mode=\"wait\">\r\n                        {isActive && (\r\n                          <motion.div\r\n                            initial={{ opacity: 0, height: 0 }}\r\n                            animate={{ opacity: 1, height: \"auto\" }}\r\n                            exit={{ opacity: 0, height: 0 }}\r\n                            transition={{\r\n                              duration: 0.3,\r\n                              ease: [0.23, 1, 0.32, 1],\r\n                            }}\r\n                            className=\"overflow-hidden\"\r\n                          >\r\n                            <p className=\"text-muted-foreground text-sm md:text-base font-normal leading-relaxed max-w-sm pb-2\">\r\n                              {service.description}\r\n                            </p>\r\n                          </motion.div>\r\n                        )}\r\n                      </AnimatePresence>\r\n                    </div>\r\n                  </button>\r\n                );\r\n              })}\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"lg:col-span-7 flex flex-col justify-end h-full order-1 lg:order-2\">\r\n            <div\r\n              className=\"relative group/gallery\"\r\n              onMouseEnter={() => setIsPaused(true)}\r\n              onMouseLeave={() => setIsPaused(false)}\r\n            >\r\n              <div className=\"relative aspect-4/5 md:aspect-4/3 lg:aspect-16/11 rounded-3xl md:rounded-[2.5rem] overflow-hidden bg-muted/30 border border-border/40\">\r\n                <AnimatePresence\r\n                  initial={false}\r\n                  custom={direction}\r\n                  mode=\"popLayout\"\r\n                >\r\n                  <motion.div\r\n                    key={activeIndex}\r\n                    custom={direction}\r\n                    variants={variants}\r\n                    initial=\"enter\"\r\n                    animate=\"center\"\r\n                    exit=\"exit\"\r\n                    transition={{\r\n                      y: { type: \"spring\", stiffness: 260, damping: 32 },\r\n                      opacity: { duration: 0.4 },\r\n                    }}\r\n                    className=\"absolute inset-0 w-full h-full cursor-pointer\"\r\n                    onClick={handleNext}\r\n                  >\r\n                    <img\r\n                      src={SERVICES[activeIndex].image}\r\n                      alt={SERVICES[activeIndex].title}\r\n                      className=\"w-full h-full object-cover transition-transform duration-700 hover:scale-105 m-0! p-0! block\"\r\n                    />\r\n\r\n                    <div className=\"absolute inset-x-0 bottom-0 h-1/3 bg-linear-to-t from-black/20 via-transparent to-transparent opacity-60\" />\r\n                  </motion.div>\r\n                </AnimatePresence>\r\n\r\n                <div className=\"absolute bottom-6 right-6 md:bottom-8 md:right-8 flex gap-2 md:gap-3 z-20\">\r\n                  <button\r\n                    onClick={(e) => {\r\n                      e.stopPropagation();\r\n                      handlePrev();\r\n                    }}\r\n                    className=\"w-10 h-10 md:w-12 md:h-12 rounded-full bg-background/80 backdrop-blur-md border border-border/50 flex items-center justify-center text-foreground hover:bg-background transition-all active:scale-90\"\r\n                    aria-label=\"Previous\"\r\n                  >\r\n                    <HugeiconsIcon icon={ArrowLeft01Icon} size={20} />\r\n                  </button>\r\n                  <button\r\n                    onClick={(e) => {\r\n                      e.stopPropagation();\r\n                      handleNext();\r\n                    }}\r\n                    className=\"w-10 h-10 md:w-12 md:h-12 rounded-full bg-background/80 backdrop-blur-md border border-border/50 flex items-center justify-center text-foreground hover:bg-background transition-all active:scale-90\"\r\n                    aria-label=\"Next\"\r\n                  >\r\n                    <HugeiconsIcon icon={ArrowRight01Icon} size={20} />\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}