@ghatak/slash-ui 1.0.0

package/registry/details/buttons/neubrutal-button-details.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+  MousePointer2,
+  Zap,
+  Copy,
+  Check,
+  ShieldCheck,
+} from 'lucide-react';
+
+const NeubrutalButtonDetails = () => {
+  const [copied, setCopied] = useState(false);
+  const [activeTab, setActiveTab] = useState<string | null>(null); 
+  
+  const command = 'npx slash-ui@latest add neubrutal-button';
+
+  const handleCopyCommand = () => {
+    navigator.clipboard.writeText(command);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const copyDependency = (pkg: string) => {
+    navigator.clipboard.writeText(`npm install ${pkg}`);
+    setActiveTab(pkg);
+    setTimeout(() => setActiveTab(null), 2000);
+  };
+
+  return (
+    <div className='flex flex-col gap-16 py-8 animate-in fade-in slide-in-from-bottom-4 duration-1000'>
+      {/* 1. Description */}
+      <section>
+        <h4 className='text-sm uppercase text-zinc-600 mb-6 font-mono tracking-widest'>Description</h4>
+        <p className='text-zinc-400 text-lg leading-relaxed max-w-2xl font-medium'>
+          A high-performance 3D button built with Framer Motion. It features
+          tactile depth, dynamic shadow scaling, and smooth state transitions.
+        </p>
+      </section>
+
+      {/* 2. Dependencies */}
+      <section>
+        <h4 className='text-sm uppercase text-zinc-600 mb-4 font-mono tracking-widest'>Dependencies</h4>
+        <div className='flex items-center gap-3'>
+          <button 
+            onClick={() => copyDependency('framer-motion')}
+            className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-950 border border-white/5 hover:border-white/20 transition-all active:scale-95"
+          >
+            {activeTab === 'framer-motion' ? (
+              <Check size={12} className="text-white" />
+            ) : (
+              <svg width='12' height='12' viewBox='0 0 24 24' fill='currentColor' className="text-white">
+                <path d='M0 0l12 12L24 0H0zm0 12l12 12V12H0z' />
+              </svg>
+            )}
+            <span className="text-[11px] font-mono text-white">
+              {activeTab === 'framer-motion' ? 'Copied!' : 'framer-motion'}
+            </span>
+          </button>
+
+          <button 
+            onClick={() => copyDependency('lucide-react')}
+            className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-950 border border-white/5 hover:border-white/20 transition-all active:scale-95"
+          >
+            {activeTab === 'lucide-react' ? (
+              <Check size={12} className="text-white" />
+            ) : (
+              <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='2'>
+                <path d='M14 12C14 9.79086 12.2091 8 10 8C7.79086 8 6 9.79086 6 12C6 16.4183 9.58172 20 14 20C18.4183 20 22 16.4183 22 12C22 8.446 20.455 5.25285 18 3.05557' stroke='#fff' />
+                <path d='M10 12C10 14.2091 11.7909 16 14 16C16.2091 16 18 14.2091 18 12C18 7.58172 14.4183 4 10 4C5.58172 4 2 7.58172 2 12C2 15.5841 3.57127 18.8012 6.06253 21' stroke='#fff' />
+              </svg>
+            )}
+            <span className="text-[11px] font-mono text-white">
+               {activeTab === 'lucide-react' ? 'Copied!' : 'lucide-react'}
+            </span>
+          </button>
+        </div>
+      </section>
+
+      {/* 3. Interaction Type */}
+      <section>
+        <h4 className='text-sm uppercase text-zinc-600 mb-6 font-mono tracking-widest'>Interaction</h4>
+        <div className='space-y-4'>
+          <div className='flex items-center gap-4 group'>
+            <div className='p-2 rounded-lg bg-white/5 text-zinc-500 group-hover:text-white transition-colors'>
+              <MousePointer2 size={16} />
+            </div>
+            <span className='text-sm font-medium text-zinc-400'>Realistic 3D depth on click</span>
+          </div>
+          <div className='flex items-center gap-4 group'>
+            <div className='p-2 rounded-lg bg-white/5 text-zinc-500 group-hover:text-white transition-colors'>
+              <Zap size={16} />
+            </div>
+            <span className='text-sm font-medium text-zinc-400'>Smooth hover effects</span>
+          </div>
+        </div>
+      </section>
+
+      {/* 4. Installation CLI */}
+      <section>
+        <h4 className='text-sm uppercase text-zinc-600 mb-6 font-mono tracking-widest'>Installation</h4>
+        <div 
+          onClick={handleCopyCommand}
+          className='group relative flex items-center justify-between p-5 rounded-2xl bg-black border border-white/10 hover:border-white/20 transition-all cursor-pointer active:scale-[0.99]'
+        >
+          <code className='text-xs font-cartographCF text-zinc-300'>
+            <span className='text-zinc-500'>npx</span> slash-ui@latest add <span className='text-white'>neubrutal-button</span>
+          </code>
+          <div className='p-2 hover:bg-white/5 rounded-lg text-zinc-500 group-hover:text-white transition-colors'>
+            {copied ? <Check size={14} className="text-white" /> : <Copy size={14} />}
+          </div>
+        </div>
+      </section>
+
+      {/* 5. Props */}
+      <section>
+        <h4 className='text-sm uppercase text-zinc-600 mb-6 font-mono tracking-widest'>Props</h4>
+        <div className='w-full border-t border-white/5'>
+          {[
+            { prop: 'children', desc: 'Button label or content' },
+            { prop: 'onClick', desc: 'Click handler function' },
+            { prop: 'className', desc: 'Additional Tailwind classes' },
+          ].map((item, i) => (
+            <div key={i} className='flex py-4 border-b border-white/5 text-[13px] group'>
+              <span className='w-1/3 font-mono font-bold text-white'>{item.prop}</span>
+              <span className='w-2/3 text-zinc-500 font-medium group-hover:text-zinc-400 transition-colors'>{item.desc}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 6. Footer */}
+      <footer className='pt-8 border-t border-white/5'>
+        <div className='flex items-center gap-2 text-zinc-600 text-[11px] font-bold uppercase tracking-widest font-mono'>
+          <ShieldCheck size={14} />
+          <span>License</span>
+        </div>
+        <p className='mt-4 text-xs text-zinc-500 leading-relaxed font-medium'>
+          Free for all projects.
+        </p>
+      </footer>
+    </div>
+  );
+};
+
+export default NeubrutalButtonDetails;

package/registry/details/cursor/dot-cursor-details.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const DotCursorDetails = () => {
+  return (
+    <div>
+      
+    </div>
+  )
+}
+
+export default DotCursorDetails

package/registry/details/navbar/floating-navbar-details.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const NavbarDetails = () => {
+  return (
+    <div>
+      
+    </div>
+  )
+}
+
+export default NavbarDetails

package/registry/index.ts

@@ -0,0 +1,35 @@
+// registry/index.ts
+
+export const Index = [
+  {
+    name: 'neubrutal-button',
+    type: 'ui',
+    files: ['ui/buttons/neubrutal-button.tsx'],
+    category: 'buttons',
+    install: 'npm install framer-motion lucide-react',
+  },
+
+  {
+    name: 'dot-cursor',
+    type: 'ui',
+    files: ['ui/cursors/dot-cursor.tsx'],
+    category: 'cursors',
+    install: 'npm install framer-motion',
+  },
+
+  {
+    name: 'flaoting-navbar',
+    type: 'ui',
+    files: ['ui/navbars/floating-navbar.tsx'],
+    category: 'navbars',
+    install: 'npm install lucide-react framer-motion gsap',
+  },
+
+  {
+    name: 'minimal-scrollbar',
+    type: 'ui',
+    files: ['ui/scrollbars/minimal-scrollbar.tsx'],
+    category: 'scrollbars',
+    install: '',
+  }
+];

package/registry/ui/buttons/neubrutal-button.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface NeubrutalButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+}
+
+// 1. CHANGE THIS TO DEFAULT EXPORT
+export default function NeubrutalButton({
+  children = 'Click Me!',
+  className,
+  ...props
+}: NeubrutalButtonProps) {
+  return (
+    <button
+      {...props}
+      className={cn(
+        'group relative w-[140px] h-[50px] bg-none outline-none border-none p-0 cursor-pointer active:translate-y-[2px] transition-transform',
+        className,
+      )}
+    >
+      <div className='absolute top-[14px] -left-[1px] w-[calc(100%+2px)] h-full bg-[#8c8c8c] rounded-[7mm] outline outline-2 outline-[#242622] -z-10' />
+      <div className='absolute top-[10px] left-0 w-full h-full bg-[#e5e5c7] rounded-[7mm] outline outline-2 outline-[#242622] -z-10'>
+        <div className='absolute bottom-0 left-[15%] w-[2px] h-[9px] bg-[#242622]' />
+        <div className='absolute bottom-0 left-[85%] w-[2px] h-[9px] bg-[#242622]' />
+      </div>
+      <div className='relative w-full h-full flex items-center justify-center bg-[#ffffee] rounded-[7mm] outline outline-2 outline-[#242622] text-[#242622] font-semibold text-base overflow-hidden transition-all duration-200 group-active:translate-y-[10px]'>
+        <div className='absolute top-0 -left-[20px] w-[15px] h-full bg-black/10 skew-x-[30deg] transition-all duration-300 group-active:left-[calc(100%+20px)]' />
+        {children}
+      </div>
+    </button>
+  );
+}

package/registry/ui/cursors/dot-cursor.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+
+const CustomCursor = () => {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isHovering, setIsHovering] = useState(false);
+  const [isDarkBackground, setIsDarkBackground] = useState(false);
+
+  useEffect(() => {
+    
+    // document.body.style.cursor = 'none';
+    
+    const updatePosition = (e: MouseEvent) => {
+      setPosition({ x: e.clientX, y: e.clientY });
+      
+      const element = document.elementFromPoint(e.clientX, e.clientY);
+      if (element) {
+        const bgColor = window.getComputedStyle(element).backgroundColor;
+        const brightness = getBrightness(bgColor);
+        setIsDarkBackground(brightness < 128);
+      }
+    };
+
+    const handleMouseOver = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === 'A' || 
+        target.tagName === 'BUTTON' ||
+        target.onclick !== null ||
+        window.getComputedStyle(target).cursor === 'pointer'
+      ) {
+        setIsHovering(true);
+      }
+    };
+
+    const handleMouseOut = () => {
+      setIsHovering(false);
+    };
+
+    window.addEventListener('mousemove', updatePosition);
+    document.addEventListener('mouseover', handleMouseOver);
+    document.addEventListener('mouseout', handleMouseOut);
+
+    return () => {
+      window.removeEventListener('mousemove', updatePosition);
+      document.removeEventListener('mouseover', handleMouseOver);
+      document.removeEventListener('mouseout', handleMouseOut);
+      
+     
+    };
+  }, []);
+
+  const getBrightness = (color: string) => {
+    const rgb = color.match(/\d+/g);
+    if (!rgb) return 255;
+    const r = parseInt(rgb[0]);
+    const g = parseInt(rgb[1]);
+    const b = parseInt(rgb[2]);
+    return (r * 299 + g * 587 + b * 114) / 1000;
+  };
+
+  return (
+    <div 
+    style={{ 
+      cursor: 'none', 
+      width: '100vw', 
+      height: '100vh', 
+      position: 'fixed', 
+      top: 0, 
+      left: 0, 
+      pointerEvents: 'none' 
+    }}>
+    
+    <div 
+      style={{
+        position: 'fixed',
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        pointerEvents: 'none',
+        transform: `translate(-50%, -50%) scale(${isHovering ? 1.5 : 1})`,
+        transition: 'transform 0.2s ease',
+        zIndex: 9999,
+      }}
+    >
+      <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        width="24" 
+        height="24" 
+        viewBox="0 0 24 24"
+        style={{
+          display: 'block',
+          transition: 'all 0.2s ease',
+        }}
+      >
+        <path 
+          fill={isDarkBackground ? '#ffffff' : '#000000'}
+          stroke={isDarkBackground ? '#000000' : '#ffffff'}
+          strokeWidth="2"
+          d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"
+        />
+      </svg>
+    </div>
+    </div>
+  );
+};
+
+export default CustomCursor;

package/registry/ui/navbars/floating-navbar.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Sun, Moon } from 'lucide-react';
+
+const Navbar = () => {
+  const [mounted, setMounted] = useState(false);
+  const [isDark, setIsDark] = useState(true);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const handleScroll = () => setScrolled(window.scrollY > 20);
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const toggleTheme = () => {
+    setIsDark(!isDark);
+    document.documentElement.classList.toggle('dark');
+  };
+
+  const navLinks = [
+    { name: 'Archives', slug: 'work' },
+    { name: 'Capabilities', slug: 'service' },
+    { name: 'Ethos', slug: 'about' },
+  ];
+
+  if (!mounted) return null;
+
+  return (
+    <nav className='fixed top-0 left-0 w-full z-[100] flex justify-center pt-6 px-6 pointer-events-none mt-10'>
+      <motion.div
+        initial={{ y: -100 }}
+        animate={{ y: 0 }}
+        className={`
+          flex items-center justify-between px-6 transition-all duration-500 pointer-events-auto
+          ${
+            scrolled
+              ? 'w-full md:w-[800px] h-14 bg-white/5 backdrop-blur-md border border-white/10 rounded-full shadow-2xl'
+              : 'w-full h-20 bg-transparent border-transparent'
+          }
+        `}
+      >
+        <Link href='/' className='group flex items-center'>
+          <span className=' text-3xl uppercase tracking-wide font-bold'>
+            Renoh
+          </span>
+        </Link>
+
+        <div className='hidden md:flex items-center space-x-8'>
+          {navLinks.map((link) => (
+            <Link
+              key={link.slug}
+              href={`/${link.slug}`}
+              className='text-[10px]  font-plex uppercase tracking-[0.2em] text-zinc-400 hover:text-white transition-colors relative group'
+            >
+              {link.name}
+              <span className='absolute -bottom-1 left-0 w-0 h-px bg-white transition-all duration-500 group-hover:w-full' />
+            </Link>
+          ))}
+        </div>
+
+        <div className='flex items-center space-x-4'>
+          <button
+            onClick={toggleTheme}
+            className='p-2 hover:bg-white/10 rounded-full transition-colors text-white'
+          >
+            <AnimatePresence mode='wait'>
+              <motion.div
+                key={isDark ? 'dark' : 'light'}
+                initial={{ opacity: 0, rotate: -90 }}
+                animate={{ opacity: 1, rotate: 0 }}
+                exit={{ opacity: 0, rotate: 90 }}
+                transition={{ duration: 0.2 }}
+              >
+                {isDark ? <Sun size={16} /> : <Moon size={16} />}
+              </motion.div>
+            </AnimatePresence>
+          </button>
+
+          <Link href='/contact'>
+            <motion.div
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className='px-4 py-2 bg-white text-black text-[10px] font-plex uppercase tracking-widest rounded-full'
+            >
+              Inquire
+            </motion.div>
+          </Link>
+        </div>
+      </motion.div>
+    </nav>
+  );
+};
+
+export default Navbar;

package/registry/ui/scrollbars/minimal-scrollbar.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { usePathname } from 'next/navigation';
+
+const VisualScrollbar = () => {
+  const [thumbTop, setThumbTop] = useState(0);
+  const channelRef = useRef<HTMLDivElement>(null);
+  const thumbRef = useRef<HTMLDivElement>(null);
+  const tickingRef = useRef(false);
+  const measurementsRef = useRef({
+    height: 0,
+    thumbH: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    available: 0,
+  });
+
+  // Hide scrollbar on contact page
+  const pathname = usePathname();
+  const shouldHide = pathname === '/contact';
+
+  const measure = useCallback(() => {
+    if (!channelRef.current || !thumbRef.current) return;
+
+    const chRect = channelRef.current.getBoundingClientRect();
+    const thumbRect = thumbRef.current.getBoundingClientRect();
+    const style = window.getComputedStyle(channelRef.current);
+
+    const height = chRect.height;
+    const thumbH = thumbRect.height;
+    const paddingTop = parseFloat(style.paddingTop) || 0;
+    const paddingBottom = parseFloat(style.paddingBottom) || 0;
+    const available = Math.max(
+      height - thumbH - (paddingTop + paddingBottom),
+      0
+    );
+
+    measurementsRef.current = {
+      height,
+      thumbH,
+      paddingTop,
+      paddingBottom,
+      available,
+    };
+  }, []);
+
+  const updateThumb = useCallback(() => {
+    const scrollTop = window.scrollY;
+    const scrollHeight = document.documentElement.scrollHeight;
+    const clientHeight = document.documentElement.clientHeight;
+    const maxScroll = Math.max(scrollHeight - clientHeight, 1);
+    const scrollPercent = Math.min(Math.max(scrollTop / maxScroll, 0), 1);
+    const topPx =
+      measurementsRef.current.paddingTop +
+      scrollPercent * measurementsRef.current.available;
+
+    setThumbTop(topPx);
+  }, []);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!tickingRef.current) {
+        tickingRef.current = true;
+        requestAnimationFrame(() => {
+          updateThumb();
+          tickingRef.current = false;
+        });
+      }
+    };
+
+    let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+    const handleResize = () => {
+      if (resizeTimeout) clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        measure();
+        updateThumb();
+      }, 150);
+    };
+
+    // Initial setup with small delay to ensure DOM is ready
+    const initTimeout = setTimeout(() => {
+      measure();
+      updateThumb();
+    }, 100);
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener('resize', handleResize, { passive: true });
+
+    return () => {
+      clearTimeout(initTimeout);
+      if (resizeTimeout) clearTimeout(resizeTimeout);
+      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [measure, updateThumb]);
+
+  // Return null if on contact page
+  if (shouldHide) return null;
+
+  return (
+    <>
+      <style>{`
+        :root {
+          --left-offset: 20px;
+          --track-h: 50vh;
+          --track-w: 3px;
+          --thumb-w: 2px;
+          --thumb-h: 50px;
+          --track-bg: #212121;
+          --channel-bg: rgba(255,255,255,0.15);
+          --thumb-gradient: linear-gradient(180deg,#ffffff,#d7d7d7);
+          --track-radius: 0px;
+          --thumb-radius: 0px;
+          --transition-speed: 1ms;
+        }
+
+        * {
+          box-sizing: border-box;
+        }
+
+        body {
+          background: #0a0a0a;
+          color: #e6e6e6;
+          margin: 0;
+          padding: 0;
+        }
+
+        .vs {
+          position: fixed;
+          left: var(--left-offset);
+          top: 50%;
+          transform: translateY(-50%);
+          width: var(--track-w);
+          height: var(--track-h);
+          background: var(--track-bg);
+          border-radius: var(--track-radius);
+          overflow: hidden;
+          box-shadow:
+            inset 0 1px 0 rgba(255,255,255,0.08),
+            0 10px 24px rgba(0,0,0,0.6);
+          backdrop-filter: blur(6px);
+          pointer-events: none;
+          z-index: 9999;
+          display: flex;
+          justify-content: center;
+          will-change: transform;
+        }
+
+        .vs__channel {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background: var(--channel-bg);
+          border-radius: var(--track-radius);
+          overflow: hidden;
+        }
+
+        .vs__thumb {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%) translateZ(0);
+          width: var(--thumb-w);
+          height: var(--thumb-h);
+          border-radius: var(--thumb-radius);
+          background: var(--thumb-gradient);
+          box-shadow:
+            0 4px 14px rgba(0,0,0,0.6),
+            inset 0 1px 0 rgba(255,255,255,0.4);
+          will-change: top;
+        }
+
+        .vs:hover .vs__thumb {
+          transform: translateX(-50%) translateZ(0) scaleY(1.05);
+          transition: transform 180ms ease;
+        }
+
+        @media (max-width:720px) {
+          :root {
+            --left-offset: 10px;
+            --thumb-h: 30px;
+            --track-w: 3px;
+            --track-h: 30vh;
+          }
+        }
+      `}</style>
+
+      {/* Visual Scrollbar */}
+      <div className='vs'>
+        <div className='vs__channel' ref={channelRef}>
+          <div
+            className='vs__thumb'
+            ref={thumbRef}
+            style={{ top: `${thumbTop}px` }}
+            aria-hidden='true'
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default VisualScrollbar;