{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "Athaxv", "homepage": "https://safeedaadmi.dev/components", "items": [ { "name": "utils", "title": "Utility Functions", "author": "Athaxv ", "dependencies": [ "clsx", "tailwind-merge" ], "files": [ { "path": "src/lib/utils.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": "Athaxv ", "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": [ "@Athaxv/utils" ], "files": [ { "path": "src/registry/theme-switcher/theme-switcher.tsx", "type": "registry:component" } ], "docs": "https://safeedaadmi.dev/components/theme-switcher-component", "type": "registry:component" }, { "name": "flip-sentences", "title": "Flip Sentences", "author": "Athaxv ", "dependencies": [ "motion" ], "registryDependencies": [ "@Athaxv/utils" ], "files": [ { "path": "src/registry/flip-sentences/flip-sentences.tsx", "type": "registry:component" } ], "type": "registry:component" }, { "name": "apple-hello-effect", "title": "Apple Hello Effect", "author": "Athaxv ", "description": "Create a Xin chào and Hello writing effect inspired by Apple using Motion for React.", "dependencies": [ "motion" ], "registryDependencies": [ "@Athaxv/utils" ], "files": [ { "path": "src/registry/apple-hello-effect/apple-hello-effect.tsx", "type": "registry:component" } ], "docs": "https://safeedaadmi.dev/components/apple-hello-effect", "type": "registry:component" }, { "name": "wheel-picker", "title": "Wheel Picker", "author": "Athaxv ", "description": "iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.", "dependencies": [ "@Athaxv/react-wheel-picker" ], "registryDependencies": [ "@Athaxv/utils" ], "files": [ { "path": "src/registry/wheel-picker/wheel-picker.tsx", "type": "registry:component" } ], "docs": "https://safeedaadmi.dev/components/react-wheel-picker", "type": "registry:component" }, { "name": "work-experience", "title": "Work Experience", "author": "Athaxv ", "description": "Displays a list of work experiences with role details and durations.", "dependencies": [ "react-markdown", "lucide-react" ], "devDependencies": [ "@tailwindcss/typography", "tw-animate-css" ], "registryDependencies": [ "@Athaxv/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://safeedaadmi.dev/components/work-experience-component", "type": "registry:component" }, { "name": "shimmering-text", "title": "Shimmering Text", "author": "Athaxv ", "description": "Smooth shimmering text animation built with Motion.", "dependencies": [ "motion" ], "registryDependencies": [ "@Athaxv/utils" ], "files": [ { "path": "src/registry/shimmering-text/shimmering-text.tsx", "type": "registry:component" } ], "type": "registry:component" }, { "name": "slide-to-unlock", "title": "Slide to Unlock", "author": "Athaxv ", "description": "A sleek, interactive slider inspired by the classic iPhone OS 'slide to unlock' gesture.", "dependencies": [ "motion" ], "registryDependencies": [ "@Athaxv/utils", "@Athaxv/shimmering-text" ], "files": [ { "path": "src/registry/slide-to-unlock/slide-to-unlock.tsx", "type": "registry:component" } ], "docs": "https://safeedaadmi.dev/components/slide-to-unlock", "type": "registry:component" }, { "name": "testimonials-marquee", "title": "Testimonials Marquee", "author": "Athaxv ", "description": "A testimonials marquee component for showcasing user feedback in a scrolling format.", "registryDependencies": [ "@Athaxv/utils", "@kibo-ui/marquee" ], "files": [ { "path": "src/registry/testimonials-marquee/testimonials-marquee.tsx", "type": "registry:component" } ], "docs": "https://safeedaadmi.dev/components/testimonials-marquee", "type": "registry:component" }, { "name": "github-stars", "title": "GitHub Stars", "author": "Athaxv ", "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" } ], "type": "registry:component" }, { "name": "scroll-fade-effect", "title": "Scroll Fade Effect", "author": "Athaxv ", "description": "A React component that adds a fade effect to content as you scroll.", "registryDependencies": [ "@Athaxv/utils" ], "files": [ { "path": "src/registry/scroll-fade-effect/scroll-fade-effect.tsx", "type": "registry:component" } ], "css": { "@property --top-mask-height": { "syntax": "\"\"", "inherits": "true", "initial-value": "0px" }, "@property --bottom-mask-height": { "syntax": "\"\"", "inherits": "true", "initial-value": "64px" }, "@property --left-mask-width": { "syntax": "\"\"", "inherits": "true", "initial-value": "0px" }, "@property --right-mask-width": { "syntax": "\"\"", "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": "Athaxv ", "description": "A React component for managing user consent for cookies and tracking in Next.js applications.", "dependencies": [ "@c15t/nextjs" ], "registryDependencies": [ "@Athaxv/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)" } }, "type": "registry:component" }, { "name": "wheel-picker-block-01", "registryDependencies": [ "@Athaxv/wheel-picker" ], "files": [ { "path": "src/registry/examples/wheel-picker-demo.tsx", "type": "registry:component" } ], "type": "registry:block" }, { "name": "wheel-picker-block-02", "dependencies": [ "react-hook-form", "@hookform/resolvers", "zod" ], "registryDependencies": [ "@Athaxv/wheel-picker", "form", "button", "sonner" ], "files": [ { "path": "src/registry/examples/wheel-picker-form-demo.tsx", "type": "registry:component" } ], "type": "registry:block" }, { "name": "work-experience-block-01", "registryDependencies": [ "@Athaxv/work-experience" ], "files": [ { "path": "src/registry/examples/work-experience-demo.tsx", "type": "registry:component" } ], "type": "registry:block" }, { "name": "shimmering-text-block-01", "registryDependencies": [ "@Athaxv/shimmering-text" ], "files": [ { "path": "src/registry/examples/shimmering-text-demo-01.tsx", "type": "registry:component" } ], "type": "registry:block" }, { "name": "shimmering-text-block-02", "registryDependencies": [ "@Athaxv/shimmering-text" ], "files": [ { "path": "src/registry/examples/shimmering-text-demo-02.tsx", "type": "registry:component" } ], "type": "registry:block" }, { "name": "slide-to-unlock-block-01", "registryDependencies": [ "@Athaxv/slide-to-unlock", "@Athaxv/use-sound" ], "files": [ { "path": "src/registry/examples/slide-to-unlock-demo-01.tsx", "type": "registry:component" } ], "type": "registry:block" }, { "name": "slide-to-unlock-block-02", "registryDependencies": [ "@Athaxv/slide-to-unlock" ], "files": [ { "path": "src/registry/examples/slide-to-unlock-demo-02.tsx", "type": "registry:component" } ], "type": "registry:block" }, { "name": "slide-to-unlock-block-03", "registryDependencies": [ "@Athaxv/slide-to-unlock" ], "files": [ { "path": "src/registry/examples/slide-to-unlock-demo-03.tsx", "type": "registry:component" } ], "type": "registry:block" }, { "name": "testimonials-marquee-block-01", "registryDependencies": [ "@Athaxv/testimonials-marquee" ], "files": [ { "path": "src/registry/examples/testimonials-marquee-demo-01.tsx", "type": "registry:component" } ], "type": "registry:block" }, { "name": "testimonials-marquee-block-02", "registryDependencies": [ "@Athaxv/testimonials-marquee" ], "files": [ { "path": "src/registry/examples/testimonials-marquee-demo-02.tsx", "type": "registry:component" } ], "type": "registry:block" }, { "name": "scroll-fade-effect-block-01", "registryDependencies": [ "@Athaxv/scroll-fade-effect" ], "files": [ { "path": "src/registry/examples/scroll-fade-effect-demo-01.tsx", "type": "registry:component" } ], "type": "registry:block" }, { "name": "scroll-fade-effect-block-02", "registryDependencies": [ "@Athaxv/scroll-fade-effect" ], "files": [ { "path": "src/registry/examples/scroll-fade-effect-demo-02.tsx", "type": "registry:component" } ], "type": "registry:block" }, { "name": "scroll-fade-effect-block-03", "registryDependencies": [ "@Athaxv/scroll-fade-effect", "scroll-area", "separator" ], "files": [ { "path": "src/registry/examples/scroll-fade-effect-demo-03.tsx", "type": "registry:component" } ], "type": "registry:block" }, { "name": "scroll-fade-effect-block-04", "registryDependencies": [ "@Athaxv/scroll-fade-effect", "scroll-area" ], "files": [ { "path": "src/registry/examples/scroll-fade-effect-demo-04.tsx", "type": "registry:component" } ], "type": "registry:block" } ] }