{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "container-stagger-demo",
  "title": "Stagger Container Demo",
  "description": "Demo showing stagger container component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/container-stagger",
    "https://systaliko-ui.vercel.app/r/transitions"
  ],
  "files": [
    {
      "path": "registry/demo/blocks/container-stagger/index.tsx",
      "content": "'use client';\nimport { ContainerStagger } from '@/components/systaliko-ui/blocks/container-stagger';\nimport { Badge } from '@/components/systaliko-ui/shadcn/badge';\nimport { Button } from '@/components/systaliko-ui/shadcn/button';\nimport { TRANSITIONS } from '@/components/systaliko-ui/utils/transitions';\nimport { ANIMATION_VARIANTS } from '@/components/systaliko-ui/utils/animation-variants';\nimport { ArrowUpRightIcon, ComponentIcon } from 'lucide-react';\nimport { motion, MotionConfig } from 'motion/react';\nimport Link from 'next/link';\n\nexport function ContainerStaggerDemo() {\n  const animationVariants = ANIMATION_VARIANTS.blur;\n  return (\n    <section className=\"relative max-w-7xl place-content-center  px-6 py-12 w-full\">\n      <ContainerStagger className=\"flex flex-col items-center text-center justify-center space-y-5\">\n        <MotionConfig transition={TRANSITIONS.filter}>\n          <motion.div variants={animationVariants}>\n            <Link href=\"https://systaliko-ui.vercel.app/r/docs/containers/container-stagger\">\n              <Badge variant=\"secondary\">100% free and open source</Badge>\n            </Link>\n          </motion.div>\n\n          <motion.h1\n            variants={animationVariants}\n            className=\"text-4xl font-semibold tracking-tight max-w-[25ch]\"\n          >\n            Beautiful animated components, easy to change and adapt to your\n            design.\n          </motion.h1>\n\n          <motion.p variants={animationVariants} className=\"max-w-prose\">\n            A modern component library built on top of Shadcn registry. Designed\n            for flexibility, built for customization, and crafted to scale\n            across variants and use cases.\n          </motion.p>\n\n          <motion.div\n            variants={animationVariants}\n            className=\"flex items-center gap-2 justify-center\"\n          >\n            <Button>\n              <Link href=\"/docs\">Browse Components</Link>\n              <ComponentIcon />\n            </Button>\n            <Button variant={'outline'}>\n              <Link href=\"/docs/heros/hero-gradient\">Browse Templates</Link>\n              <ArrowUpRightIcon />\n            </Button>\n          </motion.div>\n        </MotionConfig>\n      </ContainerStagger>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/blocks/container-stagger.tsx"
    }
  ],
  "type": "registry:block"
}