🚀 XLIBs - Comprehensive UI Component Library

A modern React component library featuring Aceternity UI, MagicUI, and ShadCN components with TypeScript support.

📦 Installation

npm install @tamilvananmurugan/xlibs

🎨 CSS Import (Required for Proper Styling)

IMPORTANT: You must import the CSS file separately for components to render properly, especially chart components.

Option 1: Import from root (Recommended for Vite/Next.js)

import '@tamilvananmurugan/xlibs/xlibs.css';

Option 2: Import from dist folder

import '@tamilvananmurugan/xlibs/dist/xlibs.css';

Option 3: Import using CSS alias

import '@tamilvananmurugan/xlibs/css';

Option 4: Import in your main CSS file

@import '@tamilvananmurugan/xlibs/xlibs.css';

Option 5: If Vite still has issues, try this in vite.config.ts

// vite.config.ts
export default defineConfig({
  resolve: {
    alias: {
      '@tamilvananmurugan/xlibs/xlibs.css': 'node_modules/@tamilvananmurugan/xlibs/xlibs.css'
    }
  }
});

Why this is needed: Chart components and other UI elements require CSS variables and classes that are defined in the xlibs.css file. Without importing this CSS, you may see missing styles or components not rendering properly.

Troubleshooting: If you get Vite/Rollup errors, try Option 2 or Option 3, or use the vite.config.ts alias approach.

🎯 Features

• 40+ Components from Aceternity UI, MagicUI, and ShadCN
• TypeScript Support with full type definitions
• Tailwind CSS integration
• Framer Motion animations
• Responsive Design with mobile-first approach
• Dark Mode support
• Customizable with CSS variables

🧩 Component Categories

🎨 Aceternity UI Components

• 3D Effects: ThreeDCardDemo, CardContainer, CardBody, CardItem
• Background Effects: BackgroundBeamsWithCollision, BackgroundLines
• Interactive: FloatingDock, Carousel, CometCard
• Text Effects: TextHoverEffect, ContainerTextFlip
• Advanced: CanvasRevealEffect, CardSpotlight, AnimatedTestimonials

✨ MagicUI Components

• Layout: BentoGrid, BentoCard, BentoDemo
• Buttons: ShinyButton, RainbowButton
• Progress: AnimatedCircularProgressBar
• Navigation: Dock, DockIcon, FloatingDock
• Content: Marquee, AnimatedList, Globe, TextAnimate
• Utility: ScriptCopyBtn, ArcTimeline, PixelImage

🎯 ShadCN Components

• Charts: ChartBarDefault
• Layout: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter

🚀 Quick Start

Basic Usage

import { 
  BentoGrid, 
  BentoCard,
  ShinyButton, 
  BackgroundBeamsWithCollision 
} from '@tamilvananmurugan/xlibs';

function App() {
  return (
    <div className="min-h-screen bg-background">
      <BackgroundBeamsWithCollision className="absolute inset-0">
        <div />
      </BackgroundBeamsWithCollision>
      
      <div className="relative z-10 p-8">
        <BentoGrid className="max-w-6xl mx-auto">
        <BentoCard 
          name="Feature"
            description="Amazing feature description"
          href="#"
          cta="Learn More"
            className="md:col-span-2"
        />
      </BentoGrid>
        
        <ShinyButton className="mt-8">
          Get Started
        </ShinyButton>
      </div>
    </div>
  );
}

📚 Component Documentation

🎨 Aceternity UI Components

BackgroundBeamsWithCollision

Required Props:

• children: React.ReactNode - Content to display over the background

Optional Props:

• className: string - Additional CSS classes

<BackgroundBeamsWithCollision className="h-screen">
  <div className="text-center">
    <h1>Welcome</h1>
    <p>Content goes here</p>
  </div>
</BackgroundBeamsWithCollision>

AnimatedTestimonials

Required Props:

• testimonials: Array of testimonial objects

Optional Props:

• autoplay: boolean - Enable auto-rotation (default: false)

<AnimatedTestimonials 
  testimonials={[
    {
      quote: "Amazing product!",
      name: "John Doe",
      designation: "CEO",
      src: "https://example.com/avatar.jpg"
    }
  ]}
  autoplay={true}
/>

FloatingDock

Required Props:

• items: Array of navigation items

Optional Props:

• desktopClassName: string - Desktop-specific classes
• mobileClassName: string - Mobile-specific classes

<FloatingDock 
  items={[
    { title: 'Home', icon: '🏠', href: '/' },
    { title: 'About', icon: 'ℹ️', href: '/about' },
    { title: 'Contact', icon: '📧', href: '/contact' }
  ]}
/>

✨ MagicUI Components

AnimatedCircularProgressBar

Required Props:

• value: number - Current progress value
• gaugePrimaryColor: string - Primary progress color
• gaugeSecondaryColor: string - Secondary progress color

Optional Props:

• max: number - Maximum value (default: 100)
• min: number - Minimum value (default: 0)
• className: string - Additional CSS classes

<AnimatedCircularProgressBar 
  value={75}
  gaugePrimaryColor="var(--primary)"
  gaugeSecondaryColor="var(--muted)"
  className="w-32 h-32"
/>

BentoCard

Required Props:

• name: string - Card title
• description: string - Card description

Optional Props:

• Icon: React.ComponentType - Icon component
• href: string - Link URL
• cta: string - Call-to-action text
• className: string - Additional CSS classes
• children: React.ReactNode - Additional content

<BentoCard 
  Icon={GlobeIcon}
  name="Global Features"
  description="Access features from anywhere in the world"
  href="/features"
  cta="Explore"
  className="md:col-span-2"
/>

ShinyButton

Required Props:

• children: React.ReactNode - Button content

Optional Props:

• className: string - Additional CSS classes
• All standard button HTML attributes

<ShinyButton className="px-6 py-3 text-lg">
  Click Me
</ShinyButton>

RainbowButton

Required Props:

• children: React.ReactNode - Button content

Optional Props:

• variant: 'default' | 'outline' - Button style variant
• size: 'default' | 'sm' | 'lg' | 'icon' - Button size
• asChild: boolean - Render as child component
• className: string - Additional CSS classes

<RainbowButton 
  variant="outline" 
  size="lg"
  className="font-bold"
>
  Rainbow Effect
</RainbowButton>

AnimatedBeam

Required Props:

• containerRef: RefObject - Container element reference
• fromRef: RefObject - Starting element reference
• toRef: RefObject - Ending element reference

Optional Props:

• curvature: number - Path curvature amount (default: 0)
• gradientStartColor: string - Gradient start color (default: var(--xlibs-primary))
• gradientStopColor: string - Gradient end color (default: var(--xlibs-secondary))
• pathWidth: number - Path stroke width (default: 2)
• duration: number - Animation duration in seconds (default: 4-7 random)

import { useRef } from 'react';

function ConnectionDemo() {
  const containerRef = useRef<HTMLDivElement>(null);
  const fromRef = useRef<HTMLDivElement>(null);
  const toRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef} className="relative w-full h-96">
      <div ref={fromRef} className="absolute top-10 left-10 w-20 h-20 bg-blue-500 rounded-full" />
      <div ref={toRef} className="absolute bottom-10 right-10 w-20 h-20 bg-purple-500 rounded-full" />
      
      <AnimatedBeam
        containerRef={containerRef}
        fromRef={fromRef}
        toRef={toRef}
        curvature={50}
        gradientStartColor="var(--xlibs-primary)"
        gradientStopColor="var(--xlibs-secondary)"
        pathWidth={3}
        duration={5}
      />
    </div>
  );
}

BorderBeam

Required Props:

• None (all props are optional)

Optional Props:

• size: number - Beam size in pixels (default: 50)
• duration: number - Animation duration in seconds (default: 6)
• colorFrom: string - Starting color (default: var(--xlibs-primary))
• colorTo: string - Ending color (default: var(--xlibs-secondary))
• borderWidth: number - Border width in pixels (default: 1)
• reverse: boolean - Reverse animation direction (default: false)

function CardWithBorderBeam() {
  return (
    <div className="relative w-64 h-40 bg-white rounded-lg p-6">
      <h3 className="text-lg font-semibold mb-2">Card Title</h3>
      <p className="text-gray-600">Card content goes here</p>
      
      <BorderBeam
        size={60}
        duration={8}
        colorFrom="var(--xlibs-primary)"
        colorTo="var(--xlibs-secondary)"
        borderWidth={2}
        reverse={false}
      />
    </div>
  );
}

MagicCard

Required Props:

• None (all props are optional)

Optional Props:

• gradientSize: number - Gradient circle size in pixels (default: 200)
• gradientColor: string - Main gradient color (default: var(--xlibs-gray-800))
• gradientOpacity: number - Gradient opacity (default: 0.8)
• gradientFrom: string - Gradient start color (default: var(--xlibs-primary))
• gradientTo: string - Gradient end color (default: var(--xlibs-secondary))

function InteractiveCard() {
  return (
    <MagicCard
      className="w-80 h-48 p-6"
      gradientSize={250}
      gradientFrom="var(--xlibs-primary)"
      gradientTo="var(--xlibs-secondary)"
      gradientColor="var(--xlibs-gray-800)"
      gradientOpacity={0.9}
    >
      <h3 className="text-xl font-bold mb-3">Interactive Card</h3>
      <p className="text-gray-600">
        This card follows your mouse with beautiful gradient effects!
      </p>
    </MagicCard>
  );
}

NeonGradientCard

import { NeonGradientCard } from '@tamilvananmurugan/xlibs';

function NeonCardExample() {
  return (
    <NeonGradientCard
      borderSize={3}
      borderRadius={25}
      neonColors={{
        firstColor: "#ff0080",
        secondColor: "#00ffff"
      }}
    >
      <h3 className="text-xl font-bold mb-3">Neon Border Card</h3>
      <p className="text-gray-600">
        This card has a spinning neon gradient border!
      </p>
    </NeonGradientCard>
  );
}

Particles

import { Particles } from '@tamilvananmurugan/xlibs';

function ParticlesExample() {
  return (
    <div className="relative w-full h-screen">
      <Particles
        quantity={200}
        color="#6366f1"
        className="absolute inset-0"
      />
      <div className="relative z-10 p-8">
        <h1 className="text-4xl font-bold">Interactive Background</h1>
        <p>Move your mouse to interact with the particles!</p>
      </div>
    </div>
  );
}

ScratchToReveal

import { ScratchToReveal } from '@tamilvananmurugan/xlibs';

function ScratchToRevealExample() {
  return (
    <ScratchToReveal
      width={300}
      height={200}
      onComplete={() => console.log('Scratch completed!')}
    >
      <div className="flex items-center justify-center h-full bg-blue-500 text-white">
        <h2 className="text-2xl font-bold">Congratulations!</h2>
      </div>
    </ScratchToReveal>
  );
}

NumberTicker

import { NumberTicker } from '@tamilvananmurugan/xlibs';

function NumberTickerExample() {
  return (
    <div className="text-center">
      <h2 className="text-xl font-semibold mb-4">Total Users</h2>
      <NumberTicker
        value={15420}
        className="text-4xl font-bold text-blue-600"
      />
    </div>
  );
}

AnimatedShinyText

import { AnimatedShinyText } from '@tamilvananmurugan/xlibs';

function AnimatedShinyTextExample() {
  return (
    <div className="text-center">
      <AnimatedShinyText className="text-3xl font-bold">
        Welcome to Our Platform
      </AnimatedShinyText>
    </div>
  );
}

AnimatedGradientText

import { AnimatedGradientText } from '@tamilvananmurugan/xlibs';

function AnimatedGradientTextExample() {
  return (
    <div className="text-center">
      <AnimatedGradientText className="text-4xl font-bold">
        Beautiful Gradient Text
      </AnimatedGradientText>
    </div>
  );
}

RainbowButton

import { RainbowButton } from '@tamilvananmurugan/xlibs';

function RainbowButtonExample() {
  return (
    <RainbowButton size="lg" onClick={() => console.log('Clicked!')}>
      Get Started
    </RainbowButton>
  );
}

InteractiveHoverButton

import { InteractiveHoverButton } from '@tamilvananmurugan/xlibs';

function InteractiveHoverButtonExample() {
  return (
    <InteractiveHoverButton onClick={() => console.log('Clicked!')}>
      Get Started
    </InteractiveHoverButton>
  );
}

AnimatedSubscribeButton

import { AnimatedSubscribeButton } from '@tamilvananmurugan/xlibs';

function AnimatedSubscribeButtonExample() {
  return (
    <AnimatedSubscribeButton onClick={() => console.log('Button clicked!')}>
      <span>Subscribe</span>
      <span>Unsubscribe</span>
    </AnimatedSubscribeButton>
  );
}

PulsatingButton

import { PulsatingButton } from '@tamilvananmurugan/xlibs';

function PulsatingButtonExample() {
  return (
    <PulsatingButton
      pulseColor="#ff0080"
      duration="2s"
      onClick={() => console.log('Clicked!')}
    >
      Get Started
    </PulsatingButton>
  );
}

FlickeringGrid

import { FlickeringGrid } from '@tamilvananmurugan/xlibs';

function FlickeringGridExample() {
  return (
    <div className="w-full h-64">
      <FlickeringGrid
        squareSize={6}
        gridGap={8}
        flickerChance={0.4}
        color="rgb(0, 255, 0)"
        maxOpacity={0.6}
      />
    </div>
  );
}

AnimatedGridPattern

import { AnimatedGridPattern } from '@tamilvananmurugan/xlibs';

function AnimatedGridPatternExample() {
  return (
    <div className="w-full h-64 relative">
      <AnimatedGridPattern
        width={35}
        height={35}
        numSquares={80}
        maxOpacity={0.6}
        duration={3}
      />
    </div>
  );
}