UIinfinity Components

A beautiful React component library with smooth animations and stunning 3D effects. Built with TypeScript, Tailwind CSS, and Framer Motion.

✨ Features

• 🎨 100+ Beautiful Components - From basic UI elements to advanced 3D effects
• 🎭 Smooth Animations - Powered by Framer Motion and GSAP
• 🌟 3D Effects - Three.js integration for stunning visual effects
• 📱 Responsive Design - Mobile-first approach with Tailwind CSS
• 🔧 TypeScript Support - Full type safety and IntelliSense
• 🎯 Accessible - Built with accessibility in mind using Radix UI
• ⚡ Performance Optimized - Tree-shakable and optimized for production

🚀 Installation

npm install @uiinfinity/components

Or with yarn:

yarn add @uiinfinity/components

📦 Peer Dependencies

Make sure you have these peer dependencies installed:

npm install react react-dom

🎯 Quick Start

import { Button, Card, AuroraButton } from '@uiinfinity/components';

function App() {
  return (
    <div className="p-8">
      <Card className="p-6">
        <h1 className="text-2xl font-bold mb-4">Welcome to UIinfinity</h1>
        <Button>Standard Button</Button>
        <AuroraButton>Aurora Effect Button</AuroraButton>
      </Card>
    </div>
  );
}

🎨 Component Categories

Core Components

• Button - Standard button with variants
• Card - Flexible card container
• Input - Form input with validation
• Modal - Modal dialog component
• CopyCodeButton - Copy code to clipboard

Layout Components

• Navbar - Navigation bar with animations
• Footer - Footer with social links
• HeroSection - Hero section with 3D effects
• PageTransition - Smooth page transitions
• Preloader - Loading screen with animations

Animation Components

• AqueousRippleButton - Water ripple effect button
• GoboLightCard - Light projection card
• SilkCurtainDemo - Silk curtain animation
• SmokeFogModal - Smoke and fog modal effect

Experimental Components

• BioluminescentCursor - Glowing cursor effect
• CrystalBloomModal - Crystal growth modal
• FerroFormInput - Ferrofluid input effect
• FlockingList - Flocking animation list
• InkBloomTransition - Ink bloom page transition

Special Effect UI Components

• AuroraButton - Aurora borealis effect
• ClayButton - Clay morphing button
• GlassButton - Glass morphism effect
• GlowCard - Glowing card with neon effects
• HoloSphereNav - Holographic sphere navigation
• LiquidButton - Liquid animation button
• NeonGridField - Neon grid input field
• QuantumPortalNav - Quantum portal navigation
• ThreeDButton - 3D button with depth

Standard UI Components

• Accordion - Collapsible content sections
• Alert - Alert messages with variants
• Dialog - Modal dialogs
• DropdownMenu - Dropdown menus
• Form - Form components with validation
• Tabs - Tabbed content
• Toast - Toast notifications
• And many more...

🎭 Animation Examples

Aurora Button Effect

import { AuroraButton } from '@uiinfinity/components';

<AuroraButton 
  className="px-6 py-3 text-white font-medium"
  onClick={() => console.log('Aurora clicked!')}
>
  Aurora Effect
</AuroraButton>

Liquid Button Animation

import { LiquidButton } from '@uiinfinity/components';

<LiquidButton 
  className="px-6 py-3 bg-blue-500 text-white"
  onClick={() => console.log('Liquid clicked!')}
>
  Liquid Animation
</LiquidButton>

3D Card with Tilt Effect

import { TiltCard } from '@uiinfinity/components';

<TiltCard className="w-64 h-48 bg-gradient-to-br from-purple-500 to-pink-500">
  <div className="p-6 text-white">
    <h3 className="text-xl font-bold">3D Tilt Card</h3>
    <p>Hover to see the 3D effect!</p>
  </div>
</TiltCard>

🎨 Customization

Tailwind CSS Integration

The components are built with Tailwind CSS. Make sure to include Tailwind in your project:

npm install tailwindcss

Custom Themes

You can customize the appearance by extending your Tailwind config:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@uiinfinity/components/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      colors: {
        'neon-purple': '#a855f7',
        'neon-pink': '#ec4899',
        'neon-blue': '#3b82f6',
      },
      animation: {
        'aurora': 'aurora 2s ease-in-out infinite alternate',
        'liquid': 'liquid 1s ease-in-out infinite',
      }
    }
  }
}

🔧 Advanced Usage

Custom Hooks

import { useToast, useMobile } from '@uiinfinity/components';

function MyComponent() {
  const { toast } = useToast();
  const isMobile = useMobile();

  const handleClick = () => {
    toast({
      title: "Success!",
      description: "Action completed successfully",
    });
  };

  return (
    <button onClick={handleClick}>
      Show Toast
    </button>
  );
}

3D Scene Integration

import { ThreeScene } from '@uiinfinity/components';

<ThreeScene className="w-full h-96">
  {/* Your 3D content here */}
</ThreeScene>

📚 Documentation

For detailed documentation and examples, visit our documentation site.

🤝 Contributing

We welcome contributions! Please see our contributing guide for details.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Radix UI for accessible primitives
• Framer Motion for animations
• Three.js for 3D effects
• Tailwind CSS for styling
• Lucide React for icons

📞 Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 💬 Discord: Join our community

Made with ❤️ by Zakir Husain Patel