{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "shakil-ahmed-billal",
  "homepage": "https://xhakil.vercel.app/components",
  "items": [
    {
      "name": "utils",
      "title": "Utility Functions",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "dependencies": [
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "src/lib/utils.ts",
          "type": "registry:lib"
        }
      ],
      "type": "registry:lib"
    },
    {
      "name": "haptic",
      "title": "Haptic Feedback",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "Trigger haptic feedback on mobile devices.",
      "files": [
        {
          "path": "src/registry/lib/haptic/haptic.ts",
          "type": "registry:lib"
        }
      ],
      "type": "registry:lib"
    },
    {
      "name": "use-controllable-state",
      "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"
        }
      ],
      "type": "registry:hook"
    },
    {
      "name": "use-sound",
      "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"
        }
      ],
      "type": "registry:hook"
    },
    {
      "name": "theme-switcher",
      "title": "Theme Switcher",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "Toggle between system, light, and dark themes in Next.js apps.",
      "dependencies": [
        "next-themes",
        "lucide-react",
        "motion"
      ],
      "files": [
        {
          "path": "src/registry/components/theme-switcher/theme-switcher.tsx",
          "type": "registry:component"
        }
      ],
      "docs": "https://xhakil.vercel.app/components/theme-switcher",
      "type": "registry:component"
    },
    {
      "name": "text-flip",
      "title": "Text Flip",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "Animated text that cycles through items with a smooth flip transition.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "src/registry/components/text-flip/text-flip.tsx",
          "type": "registry:component"
        }
      ],
      "docs": "https://xhakil.vercel.app/components/text-flip",
      "type": "registry:component"
    },
    {
      "name": "apple-hello-effect",
      "title": "Apple Hello Effect",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "SVG writing animation inspired by Apple's Hello screen.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "src/registry/components/apple-hello-effect/apple-hello-effect.tsx",
          "type": "registry:component"
        }
      ],
      "docs": "https://xhakil.vercel.app/components/apple-hello-effect",
      "type": "registry:component"
    },
    {
      "name": "wheel-picker",
      "title": "Wheel Picker",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.",
      "dependencies": [
        "@shakil-ahmed-billal/react-wheel-picker"
      ],
      "files": [
        {
          "path": "src/registry/components/wheel-picker/wheel-picker.tsx",
          "type": "registry:component"
        }
      ],
      "docs": "https://xhakil.vercel.app/components/react-wheel-picker",
      "type": "registry:component"
    },
    {
      "name": "typography",
      "title": "Typography",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "Custom prose styles for headings, links, inline code, and emphasis.",
      "devDependencies": [
        "@tailwindcss/typography"
      ],
      "css": {
        "@plugin @tailwindcss/typography": {},
        "@utility prose-shakil-ahmed-billal": {
          "@apply prose-headings:tracking-tight prose-headings:text-balance prose-h2:font-semibold": {},
          "@apply prose-a:font-medium prose-a:wrap-break-word prose-a:text-foreground prose-a:underline prose-a:underline-offset-4": {},
          "@apply prose-code:rounded-md prose-code:border prose-code:bg-muted/50 prose-code:px-[0.3rem] prose-code:py-[0.2rem] prose-code:text-sm prose-code:font-normal prose-code:before:content-none prose-code:after:content-none": {},
          "@apply prose-strong:font-medium": {}
        }
      },
      "type": "registry:component",
      "files": []
    },
    {
      "name": "work-experience",
      "title": "Work Experience",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "Display work experiences with role details, company logos, and durations.",
      "dependencies": [
        "react-markdown",
        "lucide-react"
      ],
      "devDependencies": [
        "@tailwindcss/typography"
      ],
      "registryDependencies": [
        "collapsible",
        "separator",
        "https://xhakil.vercel.app/r/typography.json"
      ],
      "files": [
        {
          "path": "src/registry/components/work-experience/work-experience.tsx",
          "type": "registry:component"
        }
      ],
      "docs": "https://xhakil.vercel.app/components/work-experience",
      "type": "registry:component"
    },
    {
      "name": "shimmering-text",
      "title": "Shimmering Text",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "Smooth, light-sweeping shimmer animation for text.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "src/registry/components/shimmering-text/shimmering-text.tsx",
          "type": "registry:component"
        }
      ],
      "type": "registry:component"
    },
    {
      "name": "slide-to-unlock",
      "title": "Slide to Unlock",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "Interactive slider inspired by the classic iPhone 'slide to unlock' gesture.",
      "dependencies": [
        "motion"
      ],
      "registryDependencies": [
        "https://xhakil.vercel.app/r/shimmering-text.json"
      ],
      "files": [
        {
          "path": "src/registry/components/slide-to-unlock/slide-to-unlock.tsx",
          "type": "registry:component"
        }
      ],
      "docs": "https://xhakil.vercel.app/components/slide-to-unlock",
      "type": "registry:component"
    },
    {
      "name": "testimonials-marquee",
      "title": "Testimonials Marquee",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "Scrolling marquee to showcase user testimonials.",
      "registryDependencies": [
        "@kibo-ui/marquee",
        "https://xhakil.vercel.app/r/testimonial.json"
      ],
      "docs": "https://xhakil.vercel.app/components/testimonials-marquee",
      "type": "registry:component",
      "files": []
    },
    {
      "name": "testimonial",
      "title": "Testimonial",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "Display user feedback with author info, avatar, and verified badge.",
      "files": [
        {
          "path": "src/registry/components/testimonial/testimonial.tsx",
          "type": "registry:component"
        }
      ],
      "type": "registry:component"
    },
    {
      "name": "github-stars",
      "title": "GitHub Stars",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "Display GitHub repo star count with formatted numbers and full-count tooltip.",
      "registryDependencies": [
        "button",
        "tooltip"
      ],
      "files": [
        {
          "path": "src/registry/components/github-stars/github-stars.tsx",
          "type": "registry:component"
        }
      ],
      "type": "registry:component"
    },
    {
      "name": "scroll-fade-effect",
      "title": "Scroll Fade Effect",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "Fade content edges as you scroll, for both vertical and horizontal layouts.",
      "files": [
        {
          "path": "src/registry/components/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"
        }
      },
      "type": "registry:component"
    },
    {
      "name": "consent-manager",
      "title": "Consent Manager",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "Cookie and tracking consent banner for Next.js, built on c15t.",
      "dependencies": [
        "@c15t/nextjs"
      ],
      "registryDependencies": [
        "button"
      ],
      "files": [
        {
          "path": "src/registry/components/consent-manager/consent-manager.tsx",
          "type": "registry:component"
        }
      ],
      "type": "registry:component"
    },
    {
      "name": "copy-button",
      "title": "Copy Button",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "Copy text to clipboard with visual feedback and animation.",
      "dependencies": [
        "lucide-react",
        "motion"
      ],
      "registryDependencies": [
        "button"
      ],
      "files": [
        {
          "path": "src/registry/components/copy-button/copy-button.tsx",
          "type": "registry:component"
        },
        {
          "path": "src/hooks/use-copy-to-clipboard.ts",
          "type": "registry:hook"
        }
      ],
      "type": "registry:component"
    },
    {
      "name": "code-block-command",
      "title": "Code Block Command",
      "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
      "description": "Display install commands with package manager switcher and copy button.",
      "dependencies": [
        "@base-ui/react",
        "lucide-react",
        "motion",
        "jotai"
      ],
      "registryDependencies": [
        "https://xhakil.vercel.app/r/copy-button.json",
        "https://xhakil.vercel.app/r/scroll-fade-effect.json"
      ],
      "files": [
        {
          "path": "src/registry/components/code-block-command/code-block-command.tsx",
          "type": "registry:component"
        },
        {
          "path": "src/components/base/ui/tabs.tsx",
          "type": "registry:component"
        },
        {
          "path": "src/hooks/use-package-manager.ts",
          "type": "registry:hook"
        }
      ],
      "cssVars": {
        "theme": {
          "color-code": "var(--code)",
          "color-code-foreground": "var(--code-foreground)"
        },
        "light": {
          "code": "oklch(0.985 0 0)",
          "code-foreground": "oklch(0.141 0.005 285.823)"
        },
        "dark": {
          "code": "oklch(0.21 0.006 285.885)",
          "code-foreground": "oklch(0.985 0 0)"
        }
      },
      "type": "registry:component"
    }
  ]
}