{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sticky-cta-bar",
  "type": "registry:component",
  "title": "Sticky cta bar",
  "description": "A Tailwind floating CTA bar that slides up from the bottom once the page scrolls past 320px, with a title, a docs link and a magnetic get started button.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/magnetic-cta.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/sticky-cta-bar.tsx",
      "type": "registry:ui",
      "target": "components/ui/sticky-cta-bar.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useScroll, useMotionValueEvent, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { MagneticCta } from \"@/components/ui/magnetic-cta\"\nimport { Button } from \"@/components/ui/button\"\n\nfunction StickyCtaBar({\n  title = \"Ready when you are\",\n  className,\n}: {\n  title?: string\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const { scrollY } = useScroll()\n  const [show, setShow] = React.useState(false)\n  useMotionValueEvent(scrollY, \"change\", (v) => setShow(v > 320))\n  return (\n    <motion.div\n      data-slot=\"sticky-cta-bar\"\n      data-tier=\"premium\"\n      initial={false}\n      animate={reduce ? { y: show ? 0 : 80 } : { y: show ? 0 : 96 }}\n      transition={{ type: \"spring\", stiffness: 260, damping: 28 }}\n      className={cn(\n        \"fixed inset-x-0 bottom-3 z-40 mx-auto flex w-[min(640px,calc(100%-1.5rem))] flex-col gap-2 rounded-2xl border border-border bg-surface/95 px-3 py-3 shadow-highlight backdrop-blur-sm sm:bottom-4 sm:w-[min(640px,calc(100%-2rem))] sm:flex-row sm:items-center sm:justify-between sm:gap-3 sm:px-4\",\n        className\n      )}\n    >\n      <p className=\"text-center text-sm font-medium text-fg sm:text-left\">{title}</p>\n      <div className=\"flex gap-2\">\n        <Button size=\"sm\" variant=\"outline\" className=\"flex-1 sm:flex-none\">Docs</Button>\n        <MagneticCta size=\"sm\" className=\"flex-1 sm:flex-none [&_button]:w-full\">Get started</MagneticCta>\n      </div>\n    </motion.div>\n  )\n}\nexport { StickyCtaBar }\n"
    }
  ]
}