{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "nurav-ui", "homepage": "https://nurav-ui.vercel.app", "items": [ { "name": "nurav-ui", "type": "registry:style", "dependencies": [ "@hugeicons/react", "lucide-react", "clsx", "tailwind-merge", "motion", "tw-animate-css" ], "registryDependencies": [ "utils", "font-outfit", "font-geist-mono", "base-maia" ], "cssVars": { "theme": { "font-sans": "var(--font-sans)" } } }, { "name": "utils", "type": "registry:lib", "dependencies": [ "clsx", "tailwind-merge" ], "files": [ { "path": "lib/utils.ts", "type": "registry:lib", "target": "lib/utils.ts" } ] }, { "name": "font-outfit", "type": "registry:font", "font": { "family": "var(--font-sans)", "provider": "google", "import": "Outfit", "variable": "--font-sans", "subsets": [ "latin" ], "dependency": "next/font/google" } }, { "name": "font-geist-mono", "type": "registry:font", "font": { "family": "var(--font-mono)", "provider": "google", "import": "Geist_Mono", "variable": "--font-mono", "subsets": [ "latin" ], "dependency": "next/font/google" } }, { "name": "base-maia", "type": "registry:base", "config": { "style": "base-maia", "iconLibrary": "hugeicons", "tailwind": { "baseColor": "neutral", "css": "app/globals.css" } }, "dependencies": [ "class-variance-authority", "tw-animate-css", "@hugeicons/react", "motion", "clsx", "tailwind-merge" ], "registryDependencies": [ "utils", "font-outfit", "font-geist-mono" ], "cssVars": { "light": { "background": "oklch(0.9900 0 0)", "foreground": "oklch(0 0 0)", "card": "oklch(1 0 0)", "card-foreground": "oklch(0 0 0)", "popover": "oklch(0.9900 0 0)", "popover-foreground": "oklch(0 0 0)", "primary": "oklch(0 0 0)", "primary-foreground": "oklch(1 0 0)", "secondary": "oklch(0.9400 0 0)", "secondary-foreground": "oklch(0 0 0)", "muted": "oklch(0.9700 0 0)", "muted-foreground": "oklch(0.4400 0 0)", "accent": "oklch(0.9400 0 0)", "accent-foreground": "oklch(0 0 0)", "destructive": "oklch(0.6300 0.1900 23.0300)", "destructive-foreground": "oklch(1 0 0)", "border": "oklch(0.9200 0 0)", "input": "oklch(0.9400 0 0)", "ring": "oklch(0 0 0)", "chart-1": "oklch(0.8100 0.1700 75.3500)", "chart-2": "oklch(0.5500 0.2200 264.5300)", "chart-3": "oklch(0.7200 0 0)", "chart-4": "oklch(0.9200 0 0)", "chart-5": "oklch(0.5600 0 0)", "sidebar": "oklch(0.9900 0 0)", "sidebar-foreground": "oklch(0 0 0)", "sidebar-primary": "oklch(0 0 0)", "sidebar-primary-foreground": "oklch(1 0 0)", "sidebar-accent": "oklch(0.9400 0 0)", "sidebar-accent-foreground": "oklch(0 0 0)", "sidebar-border": "oklch(0.9400 0 0)", "sidebar-ring": "oklch(0 0 0)" }, "dark": { "background": "oklch(0 0 0)", "foreground": "oklch(1 0 0)", "card": "oklch(0.1400 0 0)", "card-foreground": "oklch(1 0 0)", "popover": "oklch(0.1800 0 0)", "popover-foreground": "oklch(1 0 0)", "primary": "oklch(1 0 0)", "primary-foreground": "oklch(0 0 0)", "secondary": "oklch(0.2500 0 0)", "secondary-foreground": "oklch(1 0 0)", "muted": "oklch(0.2300 0 0)", "muted-foreground": "oklch(0.7200 0 0)", "accent": "oklch(0.3200 0 0)", "accent-foreground": "oklch(1 0 0)", "destructive": "oklch(0.6900 0.2000 23.9100)", "destructive-foreground": "oklch(0 0 0)", "border": "oklch(0.2600 0 0)", "input": "oklch(0.3200 0 0)", "ring": "oklch(0.7200 0 0)", "chart-1": "oklch(0.8100 0.1700 75.3500)", "chart-2": "oklch(0.5800 0.2100 260.8400)", "chart-3": "oklch(0.5600 0 0)", "chart-4": "oklch(0.4400 0 0)", "chart-5": "oklch(0.9200 0 0)", "sidebar": "oklch(0.1800 0 0)", "sidebar-foreground": "oklch(1 0 0)", "sidebar-primary": "oklch(1 0 0)", "sidebar-primary-foreground": "oklch(0 0 0)", "sidebar-accent": "oklch(0.3200 0 0)", "sidebar-accent-foreground": "oklch(1 0 0)", "sidebar-border": "oklch(0.3200 0 0)", "sidebar-ring": "oklch(0.7200 0 0)" } }, "css": { "@import \"tw-animate-css\"": {}, "@layer base": { "*": { "@apply border-border outline-ring/50": {} }, "body": { "@apply bg-background text-foreground": {} } }, "@layer utilities": { ".hover-scrollbar": { "scrollbar-width": "thin", "scrollbar-color": "transparent transparent", "&:hover": { "scrollbar-color": "#52525b transparent" }, "&::-webkit-scrollbar": { "width": "6px" }, "&::-webkit-scrollbar-button": { "display": "none", "width": "0", "height": "0" }, "&::-webkit-scrollbar-track": { "background": "transparent" }, "&::-webkit-scrollbar-thumb": { "background-color": "transparent", "border-radius": "10px", "transition": "background-color 0.2s ease" }, "&:hover::-webkit-scrollbar-thumb": { "background-color": "#52525b" }, "&::-webkit-scrollbar-thumb:hover": { "background-color": "#71717a" } } }, ".shiki, .shiki span, .shiki pre, .shiki code, [data-rehype-pretty-code-figure] pre, [data-rehype-pretty-code-figure] code": { "background-color": "transparent !important", "font-family": "var(--font-mono) !important" }, "pre, code, kbd, samp": { "font-family": "var(--font-mono) !important" } } }, { "name": "classic-pricing", "type": "registry:block", "title": "Classic Pricing", "description": "Interactive, minimal 3-card pricing section with smooth hover effects.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/pricing/ClassicPricing.tsx", "type": "registry:component", "target": "components/nurav-ui/ClassicPricing.tsx" } ] }, { "name": "modern-pricing", "type": "registry:block", "title": "Modern Pricing", "description": "Glassmorphism heavy 3-column pricing component with deep dark mode support.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/pricing/ModernPricing.tsx", "type": "registry:component", "target": "components/nurav-ui/ModernPricing.tsx" } ] }, { "name": "bento-pricing", "type": "registry:block", "title": "Bento Pricing", "description": "Pricing block with dynamic monthly/annually layout switching using framer-motion.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/pricing/BentoPricing.tsx", "type": "registry:component", "target": "components/nurav-ui/BentoPricing.tsx" } ] }, { "name": "brutalist-pricing", "type": "registry:block", "title": "Brutalist Pricing", "description": "Brutalist, high-contrast pricing with floating elements and strong borders.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/pricing/BrutalistPricing.tsx", "type": "registry:component", "target": "components/nurav-ui/BrutalistPricing.tsx" } ] }, { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "A vertically stacked set of interactive headings that each reveal a section of content.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "registryDependencies": [], "files": [ { "path": "registry/components/Accordion.tsx", "type": "registry:ui", "target": "components/nurav-ui/Accordion.tsx" }, { "path": "registry/hooks/use-sound.ts", "type": "registry:hook", "target": "hooks/use-sound.ts" }, { "path": "registry/hooks/sounds-data.ts", "type": "registry:hook", "target": "hooks/sounds-data.ts" } ] }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "A flexible container for content fragments, with support for headers, footers, and variants.", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/components/Card.tsx", "type": "registry:ui", "target": "components/nurav-ui/Card.tsx" } ] }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "Interactive button component with multiple visual styles, sizes, and states.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "registryDependencies": [], "files": [ { "path": "registry/components/Button.tsx", "type": "registry:ui", "target": "components/nurav-ui/Button.tsx" }, { "path": "registry/hooks/use-sound.ts", "type": "registry:hook", "target": "hooks/use-sound.ts" }, { "path": "registry/hooks/sounds-data.ts", "type": "registry:hook", "target": "hooks/sounds-data.ts" } ] }, { "name": "theme-toggler", "type": "registry:ui", "title": "Theme Toggler", "description": "A sleek theme toggler component with spring animations.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "registryDependencies": [], "files": [ { "path": "registry/components/ThemeToggler.tsx", "type": "registry:ui", "target": "components/nurav-ui/ThemeToggler.tsx" }, { "path": "registry/components/ThemeProvider.tsx", "type": "registry:ui", "target": "components/nurav-ui/ThemeProvider.tsx" }, { "path": "registry/hooks/use-sound.ts", "type": "registry:hook", "target": "hooks/use-sound.ts" }, { "path": "registry/hooks/sounds-data.ts", "type": "registry:hook", "target": "hooks/sounds-data.ts" } ] }, { "name": "theme-provider", "type": "registry:ui", "title": "Theme Provider", "description": "A wrapper component for next-themes to handle dark mode.", "dependencies": [ "next-themes" ], "files": [ { "path": "registry/components/ThemeProvider.tsx", "type": "registry:ui", "target": "components/nurav-ui/ThemeProvider.tsx" } ] }, { "name": "spotlight", "type": "registry:ui", "title": "Spotlight", "description": "A mouse-tracking spotlight effect for containers.", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/components/Spotlight.tsx", "type": "registry:ui", "target": "components/nurav-ui/Spotlight.tsx" } ] }, { "name": "spotlight-card", "type": "registry:ui", "title": "Spotlight Card", "description": "A card component with an integrated spotlight effect.", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/components/SpotlightCard.tsx", "type": "registry:ui", "target": "components/nurav-ui/SpotlightCard.tsx" }, { "path": "registry/components/Spotlight.tsx", "type": "registry:ui", "target": "components/nurav-ui/Spotlight.tsx" } ] }, { "name": "glasso-moderno", "type": "registry:block", "title": "Glasso Moderno Pricing", "description": "Premium glassmorphism pricing section with gradient borders and smooth animations.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/pricing/Glasso-moderno.tsx", "type": "registry:component", "target": "components/nurav-ui/Glasso-moderno.tsx" } ] }, { "name": "popover", "type": "registry:ui", "title": "Popover", "description": "A premium, animated popover component using Framer Motion.", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/components/Popover.tsx", "type": "registry:ui", "target": "components/nurav-ui/Popover.tsx" } ] }, { "name": "use-outside-click", "type": "registry:hook", "title": "useOutsideClick", "description": "A React hook that detects clicks outside a referenced DOM element. Handles both mouse and touch events with automatic cleanup.", "files": [ { "path": "registry/hooks/use-outside-click.ts", "type": "registry:hook", "target": "hooks/use-outside-click.ts" } ] }, { "name": "toast", "type": "registry:ui", "title": "Toast", "description": "A modern, scalable toast component with different variants and Framer Motion animations.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/components/Toast.tsx", "type": "registry:ui", "target": "components/nurav-ui/Toast.tsx" } ] }, { "name": "morphing-gallery", "type": "registry:component", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/components/MorphingGallery.tsx", "type": "registry:component", "target": "components/nurav-ui/MorphingGallery.tsx" } ] }, { "name": "skeleton", "type": "registry:ui", "title": "Skeleton", "description": "A flexible loading skeleton component with pulse and shimmer animations.", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/components/Skeleton.tsx", "type": "registry:ui", "target": "components/nurav-ui/Skeleton.tsx" } ] }, { "name": "use-debounce", "type": "registry:hook", "title": "useDebounce", "description": "A performant React hook that delays updating a value until a specified delay has passed. Ideal for search inputs and performance optimization.", "files": [ { "path": "registry/hooks/use-debounce.ts", "type": "registry:hook", "target": "hooks/use-debounce.ts" } ] }, { "name": "use-local-storage", "type": "registry:hook", "title": "useLocalStorage", "description": "A robust React hook for synchronizing state with window.localStorage. Includes SSR safety and cross-tab synchronization.", "files": [ { "path": "registry/hooks/use-local-storage.ts", "type": "registry:hook", "target": "hooks/use-local-storage.ts" } ] }, { "name": "use-toggle", "type": "registry:hook", "title": "useToggle", "description": "A simple and memoized hook for toggling boolean states. Perfect for modals, accordions, and switches.", "files": [ { "path": "registry/hooks/use-toggle.ts", "type": "registry:hook", "target": "hooks/use-toggle.ts" } ] }, { "name": "use-fetch", "type": "registry:hook", "title": "useFetch", "description": "A scalable and performant hook for fetching data. Includes AbortController for automatic cleanup and generic typing.", "files": [ { "path": "registry/hooks/use-fetch.ts", "type": "registry:hook", "target": "hooks/use-fetch.ts" } ] }, { "name": "use-fetch-demo", "type": "registry:component", "title": "useFetch Demo", "description": "A live demonstration of useFetch with Skeleton loading and error handling.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "use-fetch", "skeleton", "button" ], "files": [ { "path": "registry/components/UseFetchDemo.tsx", "type": "registry:component", "target": "components/nurav-ui/UseFetchDemo.tsx" } ] }, { "name": "footer-v1", "type": "registry:block", "title": "Modern Enterprise Footer", "description": "A clean, high-end footer with multiple link columns and a large contact CTA. Suitable for enterprise and large-scale SaaS.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/templates/footers/FooterV1.tsx", "type": "registry:component", "target": "components/nurav-ui/FooterV1.tsx" } ] }, { "name": "footer-v2", "type": "registry:block", "title": "Brutalist Brand Footer", "description": "High-impact footer featuring a floating card layout and large background typography. Perfect for studios and creative agencies.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/templates/footers/FooterV2.tsx", "type": "registry:component", "target": "components/nurav-ui/FooterV2.tsx" } ] }, { "name": "footer-v3", "type": "registry:block", "title": "Minimalist Orbit Footer", "description": "Premium dark footer with a newsletter section featuring a rotating circular graphic and link columns. Perfect for minimalist and futuristic brands.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/templates/footers/FooterV3.tsx", "type": "registry:component", "target": "components/nurav-ui/FooterV3.tsx" } ] }, { "name": "use-sound", "type": "registry:hook", "title": "useSound", "description": "A performance-optimized hook for audible feedback using Base64 encoded sounds.", "files": [ { "path": "registry/hooks/use-sound.ts", "type": "registry:hook", "target": "hooks/use-sound.ts" }, { "path": "registry/hooks/sounds-data.ts", "type": "registry:hook", "target": "hooks/sounds-data.ts" } ] }, { "name": "sound-toggle", "type": "registry:ui", "title": "Sound Toggle", "description": "A premium floating toggle component to globally enable or disable UI sound effects.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "registryDependencies": [], "files": [ { "path": "registry/components/SoundToggle.tsx", "type": "registry:ui", "target": "components/nurav-ui/SoundToggle.tsx" }, { "path": "registry/hooks/use-sound.ts", "type": "registry:hook", "target": "hooks/use-sound.ts" }, { "path": "registry/hooks/sounds-data.ts", "type": "registry:hook", "target": "hooks/sounds-data.ts" } ] }, { "name": "login-v1", "type": "registry:block", "title": "Split Login Section", "description": "A premium split-layout sign-up/login section with marketing steps and social integration.", "dependencies": [ "motion", "@hugeicons/react", "@hugeicons/core-free-icons", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/templates/login-sections/LoginV1.tsx", "type": "registry:component", "target": "components/nurav-ui/LoginV1.tsx" } ] }, { "name": "modal", "type": "registry:ui", "title": "Modal", "description": "A premium modal component with spring animations, backdrop blurring, and integrated sound effects.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/components/Modal.tsx", "type": "registry:ui", "target": "components/nurav-ui/Modal.tsx" }, { "path": "registry/hooks/use-sound.ts", "type": "registry:hook", "target": "hooks/use-sound.ts" }, { "path": "registry/hooks/sounds-data.ts", "type": "registry:hook", "target": "hooks/sounds-data.ts" } ] }, { "name": "login-v2", "type": "registry:block", "title": "Glass Minimalist Login", "description": "A modern, translucent login section with glassmorphism effects and dynamic background blurs.", "dependencies": [ "motion", "@hugeicons/react", "@hugeicons/core-free-icons", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/templates/login-sections/LoginV2.tsx", "type": "registry:component", "target": "components/nurav-ui/LoginV2.tsx" } ] }, { "name": "login-v3", "type": "registry:block", "title": "Dark Editorial Login", "description": "A bold, high-contrast design with large typography and an optional QR code login mode.", "dependencies": [ "motion", "@hugeicons/react", "@hugeicons/core-free-icons", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/templates/login-sections/LoginV3.tsx", "type": "registry:component", "target": "components/nurav-ui/LoginV3.tsx" } ] }, { "name": "marquee-v1", "type": "registry:ui", "title": "Marquee (Basic)", "description": "An infinite scrolling marquee component for highlighting features or review cards.", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/components/MarqueeV1.tsx", "type": "registry:ui", "target": "components/nurav-ui/MarqueeV1.tsx" } ] }, { "name": "marquee-v2", "type": "registry:ui", "title": "Marquee (Normal)", "description": "An infinite scrolling marquee component with fade-out edges.", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/components/MarqueeV2.tsx", "type": "registry:ui", "target": "components/nurav-ui/MarqueeV2.tsx" } ] }, { "name": "marquee-v3", "type": "registry:ui", "title": "Marquee (Hard Edge)", "description": "An infinite scrolling marquee component with sharp perspective edges.", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/components/MarqueeV3.tsx", "type": "registry:ui", "target": "components/nurav-ui/MarqueeV3.tsx" } ] }, { "name": "logo-cloud-v1", "type": "registry:block", "title": "Logo Cloud (Default)", "description": "A sleek endless scrolling marquee for displaying logos in bordered boxes.", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/components/LogoCloudV1.tsx", "type": "registry:component", "target": "components/nurav-ui/LogoCloudV1.tsx" } ] }, { "name": "logo-cloud-v2", "type": "registry:block", "title": "Logo Cloud (Minimalist)", "description": "A large, minimalist icon-only marquee with grayscale-to-color transition on hover.", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/components/LogoCloudV2.tsx", "type": "registry:component", "target": "components/nurav-ui/LogoCloudV2.tsx" } ] }, { "name": "logo-cloud-v3", "type": "registry:block", "title": "Logo Cloud (Glassmorphic)", "description": "A premium dual-row marquee with glassmorphic cards and reverse motion paths.", "dependencies": [ "motion", "clsx", "tailwind-merge" ], "files": [ { "path": "registry/components/LogoCloudV3.tsx", "type": "registry:component", "target": "components/nurav-ui/LogoCloudV3.tsx" } ] }, { "name": "copy-button", "type": "registry:ui", "title": "Copy Button", "description": "A simple button component that copies a value to the clipboard with a success state.", "dependencies": [ "lucide-react", "clsx", "tailwind-merge" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/components/copy-button.tsx", "type": "registry:ui", "target": "components/nurav-ui/copy-button.tsx" } ] }, { "name": "profile-section-v1", "type": "registry:block", "title": "Profile Section V1", "description": "A comprehensive profile section with account settings, security options, and activity logs.", "dependencies": [ "lucide-react", "clsx", "tailwind-merge" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/components/ProfileSectionV1.tsx", "type": "registry:component", "target": "components/nurav-ui/ProfileSectionV1.tsx" } ] }, { "name": "upload-file", "type": "registry:ui", "title": "Upload File", "description": "A drag-and-drop file upload component with progress indicators and file validation.", "dependencies": [ "motion", "lucide-react", "clsx", "tailwind-merge" ], "registryDependencies": [], "files": [ { "path": "registry/components/UploadFile.tsx", "type": "registry:ui", "target": "components/nurav-ui/UploadFile.tsx" } ] } ] }