{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "ncdai",
  "homepage": "https://chanhdai.com/components",
  "items": [
    {
      "name": "utils",
      "type": "registry:lib",
      "title": "Utility Functions",
      "author": "ncdai <dai@chanhdai.com>",
      "dependencies": [
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "src/lib/utils.ts",
          "type": "registry:lib"
        }
      ]
    },
    {
      "name": "use-controllable-state",
      "type": "registry:hook",
      "title": "Controllable State Hook",
      "files": [
        {
          "path": "src/hooks/use-layout-effect.tsx",
          "type": "registry:hook"
        },
        {
          "path": "src/hooks/use-controllable-state.ts",
          "type": "registry:hook"
        }
      ]
    },
    {
      "name": "use-sound",
      "type": "registry:hook",
      "title": "Sound Hook",
      "description": "Custom React hook to load and play a sound from a given URL using the Web Audio API.",
      "files": [
        {
          "path": "src/hooks/use-sound.ts",
          "type": "registry:hook"
        }
      ]
    },
    {
      "name": "theme-switcher",
      "type": "registry:component",
      "title": "Theme Switcher",
      "author": "ncdai <dai@chanhdai.com>",
      "description": "A theme switcher component for Next.js apps with next-themes and Tailwind CSS, supporting system, light, and dark modes.",
      "dependencies": [
        "next-themes",
        "lucide-react",
        "motion"
      ],
      "registryDependencies": [
        "@ncdai/utils"
      ],
      "files": [
        {
          "path": "src/registry/theme-switcher/theme-switcher.tsx",
          "type": "registry:component"
        }
      ],
      "docs": "https://chanhdai.com/components/theme-switcher-component"
    },
    {
      "name": "flip-sentences",
      "type": "registry:component",
      "title": "Flip Sentences",
      "author": "ncdai <dai@chanhdai.com>",
      "dependencies": [
        "motion"
      ],
      "registryDependencies": [
        "@ncdai/utils"
      ],
      "files": [
        {
          "path": "src/registry/flip-sentences/flip-sentences.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "apple-hello-effect",
      "type": "registry:component",
      "title": "Apple Hello Effect",
      "author": "ncdai <dai@chanhdai.com>",
      "description": "Create a Xin chào and Hello writing effect inspired by Apple using Motion for React.",
      "dependencies": [
        "motion"
      ],
      "registryDependencies": [
        "@ncdai/utils"
      ],
      "files": [
        {
          "path": "src/registry/apple-hello-effect/apple-hello-effect.tsx",
          "type": "registry:component"
        }
      ],
      "docs": "https://chanhdai.com/components/apple-hello-effect"
    },
    {
      "name": "wheel-picker",
      "type": "registry:component",
      "title": "Wheel Picker",
      "author": "ncdai <dai@chanhdai.com>",
      "description": "iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.",
      "dependencies": [
        "@ncdai/react-wheel-picker"
      ],
      "registryDependencies": [
        "@ncdai/utils"
      ],
      "files": [
        {
          "path": "src/registry/wheel-picker/wheel-picker.tsx",
          "type": "registry:component"
        }
      ],
      "docs": "https://chanhdai.com/components/react-wheel-picker"
    },
    {
      "name": "work-experience",
      "type": "registry:component",
      "title": "Work Experience",
      "author": "ncdai <dai@chanhdai.com>",
      "description": "Displays a list of work experiences with role details and durations.",
      "dependencies": [
        "react-markdown",
        "lucide-react"
      ],
      "devDependencies": [
        "@tailwindcss/typography",
        "tw-animate-css"
      ],
      "registryDependencies": [
        "@ncdai/utils",
        "collapsible",
        "separator"
      ],
      "files": [
        {
          "path": "src/registry/work-experience/work-experience.tsx",
          "type": "registry:component"
        }
      ],
      "cssVars": {
        "light": {
          "background": "oklch(1 0 0)",
          "muted": "oklch(0.967 0.001 286.375)",
          "muted-foreground": "oklch(0.552 0.016 285.938)",
          "border": "oklch(0.92 0.004 286.32)"
        },
        "dark": {
          "background": "oklch(0.141 0.005 285.823)",
          "muted": "oklch(0.274 0.006 286.033)",
          "muted-foreground": "oklch(0.705 0.015 286.067)",
          "border": "oklch(0.274 0.006 286.033)"
        }
      },
      "css": {
        "@import \"tw-animate-css\"": {},
        "@plugin @tailwindcss/typography": {}
      },
      "docs": "https://chanhdai.com/components/work-experience-component"
    },
    {
      "name": "shimmering-text",
      "type": "registry:component",
      "title": "Shimmering Text",
      "author": "ncdai <dai@chanhdai.com>",
      "description": "Smooth shimmering text animation built with Motion.",
      "dependencies": [
        "motion"
      ],
      "registryDependencies": [
        "@ncdai/utils"
      ],
      "files": [
        {
          "path": "src/registry/shimmering-text/shimmering-text.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "slide-to-unlock",
      "type": "registry:component",
      "title": "Slide to Unlock",
      "author": "ncdai <dai@chanhdai.com>",
      "description": "A sleek, interactive slider inspired by the classic iPhone OS 'slide to unlock' gesture.",
      "dependencies": [
        "motion"
      ],
      "registryDependencies": [
        "@ncdai/utils",
        "@ncdai/shimmering-text"
      ],
      "files": [
        {
          "path": "src/registry/slide-to-unlock/slide-to-unlock.tsx",
          "type": "registry:component"
        }
      ],
      "docs": "https://chanhdai.com/components/slide-to-unlock"
    },
    {
      "name": "testimonials-marquee",
      "type": "registry:component",
      "title": "Testimonials Marquee",
      "author": "ncdai <dai@chanhdai.com>",
      "description": "A testimonials marquee component for showcasing user feedback in a scrolling format.",
      "registryDependencies": [
        "@ncdai/utils",
        "@kibo-ui/marquee"
      ],
      "files": [
        {
          "path": "src/registry/testimonials-marquee/testimonials-marquee.tsx",
          "type": "registry:component"
        }
      ],
      "docs": "https://chanhdai.com/components/testimonials-marquee"
    },
    {
      "name": "github-stars",
      "type": "registry:component",
      "title": "GitHub Stars",
      "author": "ncdai <dai@chanhdai.com>",
      "description": "Display GitHub repository star count with formatted numbers and a tooltip showing the full count.",
      "registryDependencies": [
        "button",
        "tooltip"
      ],
      "files": [
        {
          "path": "src/registry/github-stars/github-stars.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "scroll-fade-effect",
      "type": "registry:component",
      "title": "Scroll Fade Effect",
      "author": "ncdai <dai@chanhdai.com>",
      "description": "A React component that adds a fade effect to content as you scroll.",
      "registryDependencies": [
        "@ncdai/utils"
      ],
      "files": [
        {
          "path": "src/registry/scroll-fade-effect/scroll-fade-effect.tsx",
          "type": "registry:component"
        }
      ],
      "css": {
        "@property --top-mask-height": {
          "syntax": "\"<length>\"",
          "inherits": "true",
          "initial-value": "0px"
        },
        "@property --bottom-mask-height": {
          "syntax": "\"<length>\"",
          "inherits": "true",
          "initial-value": "64px"
        },
        "@property --left-mask-width": {
          "syntax": "\"<length>\"",
          "inherits": "true",
          "initial-value": "0px"
        },
        "@property --right-mask-width": {
          "syntax": "\"<length>\"",
          "inherits": "true",
          "initial-value": "64px"
        },
        "@layer base": {
          "@keyframes show-top-mask": {
            "to": {
              "--top-mask-height": "var(--mask-height)"
            }
          },
          "@keyframes hide-bottom-mask": {
            "to": {
              "--bottom-mask-height": "0px"
            }
          },
          "@keyframes show-left-mask": {
            "to": {
              "--left-mask-width": "var(--mask-width)"
            }
          },
          "@keyframes hide-right-mask": {
            "to": {
              "--right-mask-width": "0px"
            }
          }
        },
        "@utility scroll-fade-effect-y": {
          "--mask-height": "64px",
          "--mask-offset-top": "0px",
          "--mask-offset-bottom": "0px",
          "--scroll-buffer": "2rem",
          "mask-image": "linear-gradient(to top, transparent, black 90%), linear-gradient(to bottom, transparent 0%, black 100%), linear-gradient(black, black)",
          "mask-size": "100% var(--top-mask-height), 100% var(--bottom-mask-height), 100% 100%",
          "mask-repeat": "no-repeat, no-repeat, no-repeat",
          "mask-position": "0 var(--mask-offset-top), 0 calc(100% - var(--mask-offset-bottom)), 0 0",
          "mask-composite": "exclude",
          "animation-name": "show-top-mask, hide-bottom-mask",
          "animation-timeline": "scroll(self), scroll(self)",
          "animation-range": "0 var(--scroll-buffer), calc(100% - var(--scroll-buffer)) 100%",
          "animation-fill-mode": "both"
        },
        "@utility scroll-fade-effect-x": {
          "--mask-width": "64px",
          "--mask-offset-left": "0px",
          "--mask-offset-right": "0px",
          "--scroll-buffer": "2rem",
          "mask-image": "linear-gradient(to left, transparent, black 90%), linear-gradient(to right, transparent 0%, black 100%), linear-gradient(black, black)",
          "mask-size": "var(--left-mask-width) 100%, var(--right-mask-width) 100%, 100% 100%",
          "mask-repeat": "no-repeat, no-repeat, no-repeat",
          "mask-position": "var(--mask-offset-left) 0, calc(100% - var(--mask-offset-right)) 0, 0 0",
          "mask-composite": "exclude",
          "animation-name": "show-left-mask, hide-right-mask",
          "animation-timeline": "scroll(self inline), scroll(self inline)",
          "animation-range": "0 var(--scroll-buffer), calc(100% - var(--scroll-buffer)) 100%",
          "animation-fill-mode": "both"
        }
      }
    },
    {
      "name": "consent-manager",
      "type": "registry:component",
      "title": "Consent Manager",
      "author": "ncdai <dai@chanhdai.com>",
      "description": "A React component for managing user consent for cookies and tracking in Next.js applications.",
      "dependencies": [
        "@c15t/nextjs"
      ],
      "registryDependencies": [
        "@ncdai/utils",
        "button"
      ],
      "files": [
        {
          "path": "src/components/consent-manager.tsx",
          "type": "registry:component"
        },
        {
          "path": "src/registry/consent-manager/consent-manager-client.tsx",
          "type": "registry:component"
        }
      ],
      "cssVars": {
        "theme": {
          "color-popover-border": "var(--popover-border)",
          "shadow-popover": "var(--shadow-popover)"
        },
        "light": {
          "popover-border": "color-mix(in oklab, var(--color-black) 15%, transparent)",
          "shadow-popover": "0 6px 24px rgba(0, 0, 0, 0.25)"
        },
        "dark": {
          "popover-border": "oklch(0.37 0.013 285.805)",
          "shadow-popover": "0 0 24px rgba(0, 0, 0, 0.5)"
        }
      }
    },
    {
      "name": "wheel-picker-block-01",
      "type": "registry:block",
      "registryDependencies": [
        "@ncdai/wheel-picker"
      ],
      "files": [
        {
          "path": "src/registry/examples/wheel-picker-demo.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "wheel-picker-block-02",
      "type": "registry:block",
      "dependencies": [
        "react-hook-form",
        "@hookform/resolvers",
        "zod"
      ],
      "registryDependencies": [
        "@ncdai/wheel-picker",
        "form",
        "button",
        "sonner"
      ],
      "files": [
        {
          "path": "src/registry/examples/wheel-picker-form-demo.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "work-experience-block-01",
      "type": "registry:block",
      "registryDependencies": [
        "@ncdai/work-experience"
      ],
      "files": [
        {
          "path": "src/registry/examples/work-experience-demo.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "shimmering-text-block-01",
      "type": "registry:block",
      "registryDependencies": [
        "@ncdai/shimmering-text"
      ],
      "files": [
        {
          "path": "src/registry/examples/shimmering-text-demo-01.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "shimmering-text-block-02",
      "type": "registry:block",
      "registryDependencies": [
        "@ncdai/shimmering-text"
      ],
      "files": [
        {
          "path": "src/registry/examples/shimmering-text-demo-02.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "slide-to-unlock-block-01",
      "type": "registry:block",
      "registryDependencies": [
        "@ncdai/slide-to-unlock",
        "@ncdai/use-sound"
      ],
      "files": [
        {
          "path": "src/registry/examples/slide-to-unlock-demo-01.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "slide-to-unlock-block-02",
      "type": "registry:block",
      "registryDependencies": [
        "@ncdai/slide-to-unlock"
      ],
      "files": [
        {
          "path": "src/registry/examples/slide-to-unlock-demo-02.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "slide-to-unlock-block-03",
      "type": "registry:block",
      "registryDependencies": [
        "@ncdai/slide-to-unlock"
      ],
      "files": [
        {
          "path": "src/registry/examples/slide-to-unlock-demo-03.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "testimonials-marquee-block-01",
      "type": "registry:block",
      "registryDependencies": [
        "@ncdai/testimonials-marquee"
      ],
      "files": [
        {
          "path": "src/registry/examples/testimonials-marquee-demo-01.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "testimonials-marquee-block-02",
      "type": "registry:block",
      "registryDependencies": [
        "@ncdai/testimonials-marquee"
      ],
      "files": [
        {
          "path": "src/registry/examples/testimonials-marquee-demo-02.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "scroll-fade-effect-block-01",
      "type": "registry:block",
      "registryDependencies": [
        "@ncdai/scroll-fade-effect"
      ],
      "files": [
        {
          "path": "src/registry/examples/scroll-fade-effect-demo-01.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "scroll-fade-effect-block-02",
      "type": "registry:block",
      "registryDependencies": [
        "@ncdai/scroll-fade-effect"
      ],
      "files": [
        {
          "path": "src/registry/examples/scroll-fade-effect-demo-02.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "scroll-fade-effect-block-03",
      "type": "registry:block",
      "registryDependencies": [
        "@ncdai/scroll-fade-effect",
        "scroll-area",
        "separator"
      ],
      "files": [
        {
          "path": "src/registry/examples/scroll-fade-effect-demo-03.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "scroll-fade-effect-block-04",
      "type": "registry:block",
      "registryDependencies": [
        "@ncdai/scroll-fade-effect",
        "scroll-area"
      ],
      "files": [
        {
          "path": "src/registry/examples/scroll-fade-effect-demo-04.tsx",
          "type": "registry:component"
        }
      ]
    }
  ]
}