{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cards-slider-shadcnui",
  "type": "registry:component",
  "title": "Cards Slider",
  "description": "Liquid smooth draggable cards slider with shadcn/ui styling and framer-motion animations",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/sliders/cards-slider.tsx",
      "content": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card } from \"@/components/ui/card\";\nimport { animate, motion, useMotionValue } from \"framer-motion\";\nimport { ChevronLeft, ChevronRight, Clock } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\n\ninterface CardData {\n  id: number;\n  title: string;\n  description: string;\n  category: string;\n  image: string;\n  author: {\n    name: string;\n    avatar: string;\n  };\n  date: string;\n  readTime: string;\n}\n\nconst cards: CardData[] = [\n  {\n    id: 1,\n    title: \"Liquid Motion\",\n    description:\n      \"Experience the fluid dynamics of modern web interactions with physics-based animations.\",\n    category: \"Animation\",\n    image:\n      \"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&q=80\",\n    author: { name: \"Alex Rivera\", avatar: \"https://github.com/shadcn.png\" },\n    date: \"Dec 12, 2024\",\n    readTime: \"5 min read\",\n  },\n  {\n    id: 2,\n    title: \"Glassmorphism\",\n    description:\n      \"Blur the lines between layers with advanced backdrop filters and transparency effects.\",\n    category: \"Design\",\n    image:\n      \"https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?w=800&q=80\",\n    author: { name: \"Sarah Chen\", avatar: \"https://github.com/shadcn.png\" },\n    date: \"Dec 10, 2024\",\n    readTime: \"4 min read\",\n  },\n  {\n    id: 3,\n    title: \"Dark Mode\",\n    description:\n      \"Easy on the eyes, elegant in appearance. A seamless transition to the dark side.\",\n    category: \"Theme\",\n    image:\n      \"https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?w=800&q=80\",\n    author: { name: \"Mike Johnson\", avatar: \"https://github.com/shadcn.png\" },\n    date: \"Dec 8, 2024\",\n    readTime: \"6 min read\",\n  },\n  {\n    id: 4,\n    title: \"Micro-Interactions\",\n    description:\n      \"Delightful details that make the difference between good and great user experience.\",\n    category: \"UX\",\n    image:\n      \"https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?w=800&q=80\",\n    author: { name: \"Emily Davis\", avatar: \"https://github.com/shadcn.png\" },\n    date: \"Dec 5, 2024\",\n    readTime: \"3 min read\",\n  },\n  {\n    id: 5,\n    title: \"Responsive Layouts\",\n    description:\n      \"Fluid grids that adapt to any screen size, ensuring your content looks perfect everywhere.\",\n    category: \"Layout\",\n    image:\n      \"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&q=80\",\n    author: { name: \"David Kim\", avatar: \"https://github.com/shadcn.png\" },\n    date: \"Dec 3, 2024\",\n    readTime: \"7 min read\",\n  },\n];\n\nexport function CardsSlider() {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n  const x = useMotionValue(0);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  useEffect(() => {\n    if (containerRef.current) {\n      setWidth(\n        containerRef.current.scrollWidth - containerRef.current.offsetWidth\n      );\n    }\n  }, []);\n\n  const CARD_WIDTH = 350; // Approximate width + gap\n  const GAP = 24;\n\n  const scrollTo = (direction: \"left\" | \"right\") => {\n    const currentX = x.get();\n    const containerWidth = containerRef.current?.offsetWidth || 0;\n    const scrollAmount = containerWidth * 0.8; // Scroll 80% of container width\n\n    let newX =\n      direction === \"left\" ? currentX + scrollAmount : currentX - scrollAmount;\n\n    // Clamp values\n    newX = Math.max(Math.min(newX, 0), -width);\n\n    animate(x, newX, {\n      type: \"spring\",\n      stiffness: 300,\n      damping: 30,\n      mass: 1,\n    });\n  };\n\n  return (\n    <div className=\"w-full max-w-6xl mx-auto p-8 relative group/slider\">\n      {/* Navigation Arrows */}\n      <div className=\"absolute top-1/2 -translate-y-1/2 left-2 z-20 opacity-0 group-hover/slider:opacity-100 transition-opacity duration-300\">\n        <button\n          onClick={() => scrollTo(\"left\")}\n          className=\"h-12 w-12 rounded-full bg-background/80 backdrop-blur-md border border-border/50 shadow-lg flex items-center justify-center hover:bg-background hover:scale-110 transition-all active:scale-95\"\n          aria-label=\"Scroll left\"\n        >\n          <ChevronLeft className=\"w-6 h-6\" />\n        </button>\n      </div>\n      <div className=\"absolute top-1/2 -translate-y-1/2 right-2 z-20 opacity-0 group-hover/slider:opacity-100 transition-opacity duration-300\">\n        <button\n          onClick={() => scrollTo(\"right\")}\n          className=\"h-12 w-12 rounded-full bg-background/80 backdrop-blur-md border border-border/50 shadow-lg flex items-center justify-center hover:bg-background hover:scale-110 transition-all active:scale-95\"\n          aria-label=\"Scroll right\"\n        >\n          <ChevronRight className=\"w-6 h-6\" />\n        </button>\n      </div>\n\n      <motion.div\n        ref={containerRef}\n        className=\"cursor-grab active:cursor-grabbing overflow-hidden px-4 py-8 -mx-4 -my-8\"\n        whileTap={{ cursor: \"grabbing\" }}\n      >\n        <motion.div\n          drag=\"x\"\n          dragConstraints={{ right: 0, left: -width }}\n          dragElastic={0.1}\n          style={{ x }}\n          className=\"flex gap-6\"\n        >\n          {cards.map((card) => (\n            <motion.div\n              key={card.id}\n              className=\"min-w-[320px] max-w-[320px] h-[420px]\"\n              whileHover={{ y: -10, transition: { duration: 0.3 } }}\n            >\n              <Card className=\"group relative h-full overflow-hidden rounded-3xl border-border/50 bg-card/30 backdrop-blur-md transition-all duration-500 hover:border-primary/50 hover:shadow-2xl hover:shadow-primary/10\">\n                {/* Image Section */}\n                <div className=\"relative h-48 overflow-hidden\">\n                  <motion.img\n                    src={card.image}\n                    alt={card.title}\n                    className=\"h-full w-full object-cover transition-transform duration-700 group-hover:scale-110\"\n                  />\n                  <div className=\"absolute inset-0 bg-gradient-to-t from-background/90 via-background/20 to-transparent opacity-60 transition-opacity duration-300 group-hover:opacity-40\" />\n\n                  <div className=\"absolute top-4 left-4\">\n                    <Badge\n                      variant=\"secondary\"\n                      className=\"bg-background/50 backdrop-blur-md border-white/10 text-xs font-medium px-3 py-1\"\n                    >\n                      {card.category}\n                    </Badge>\n                  </div>\n\n                  {/* Hover Overlay Action */}\n                  <div className=\"absolute inset-0 flex items-center justify-center bg-black/20 backdrop-blur-[2px] opacity-0 transition-opacity duration-300 group-hover:opacity-100\">\n                    <motion.button\n                      whileHover={{ scale: 1.05 }}\n                      whileTap={{ scale: 0.95 }}\n                      className=\"flex items-center gap-2 rounded-full bg-white/90 px-5 py-2 text-sm font-semibold text-black shadow-lg\"\n                    >\n                      View Details\n                    </motion.button>\n                  </div>\n                </div>\n\n                {/* Content Section */}\n                <div className=\"p-6 flex flex-col h-[calc(100%-12rem)] justify-between\">\n                  <div className=\"space-y-3\">\n                    <h3 className=\"text-xl font-bold leading-tight tracking-tight text-foreground transition-colors group-hover:text-primary\">\n                      {card.title}\n                    </h3>\n                    <p className=\"line-clamp-3 text-sm text-muted-foreground leading-relaxed\">\n                      {card.description}\n                    </p>\n                  </div>\n\n                  <div className=\"pt-4 mt-auto border-t border-border/50 flex items-center justify-between\">\n                    <div className=\"flex items-center gap-2\">\n                      <Avatar className=\"h-8 w-8 border border-border/50 ring-2 ring-background\">\n                        <AvatarImage\n                          src={card.author.avatar}\n                          alt={card.author.name}\n                        />\n                        <AvatarFallback>{card.author.name[0]}</AvatarFallback>\n                      </Avatar>\n                      <div className=\"flex flex-col\">\n                        <span className=\"text-xs font-semibold text-foreground\">\n                          {card.author.name}\n                        </span>\n                        <span className=\"text-[10px] text-muted-foreground\">\n                          {card.date}\n                        </span>\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-1.5 text-xs font-medium text-muted-foreground bg-secondary/50 px-2.5 py-1 rounded-full\">\n                      <Clock className=\"h-3 w-3\" />\n                      <span>{card.readTime}</span>\n                    </div>\n                  </div>\n                </div>\n              </Card>\n            </motion.div>\n          ))}\n        </motion.div>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/cards-slider-shadcnui.tsx"
    }
  ]
}