Xlibs Components

A modern React component library featuring Aceternity, MagicUI, and ShadCN components for building beautiful web applications.

🚀 Installation

npm install @xlibs/components

📦 What's Included

• Aceternity Components - Modern, animated UI components
• MagicUI Components - Interactive and magical UI elements
• ShadCN Components - Accessible and customizable components
• Chart Components - Data visualization components
• Utility Functions - Helper functions and configurations

🎯 Quick Start

import { Button, Card, MagicCard } from '@xlibs/components';

function App() {
  return (
    <Card>
      <MagicCard>
        <Button>Click me!</Button>
      </MagicCard>
    </Card>
  );
}

📚 Component Categories

Aceternity Components

import { 
  AnimatedButton, 
  BackgroundGradient, 
  BorderBeam,
  FloatingNav,
  PinContainer 
} from '@xlibs/components/aceternity';

MagicUI Components

import { 
  MagicCard, 
  MagicButton, 
  AnimatedBeam,
  Confetti,
  DotPattern 
} from '@xlibs/components/magicui';

ShadCN Components

import { 
  Button, 
  Card, 
  Input, 
  Dialog,
  DropdownMenu 
} from '@xlibs/components/ui';

Chart Components

import { 
  ChartArea, 
  ChartBar, 
  ChartPie,
  ChartLine 
} from '@xlibs/components/charts';

🎨 Theme Configuration

The library uses CSS custom properties for theming. Include the theme CSS in your project:

@import '@xlibs/components/dist/index.css';

Default Theme Colors

• Primary: #249e5e (Green)
• Secondary: #2a3289 (Blue)
• Supports light/dark modes

🛠️ Utilities

import { cn, createComponentConfig, buildComponentClasses } from '@xlibs/components';

// Class name merging
const className = cn('base-class', 'conditional-class');

// Component configuration
const config = createComponentConfig({
  variants: { /* ... */ },
  sizes: { /* ... */ }
});

📖 Examples

Check out the demo applications for complete examples:

• Demo Dashboard: npm run dev:demo
• Demo2: npm run dev:demo2
• Demo3: npm run dev:demo3

🔧 Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build:lib

# Build all demos
npm run build:all

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📞 Support

• Issues: GitHub Issues
• Documentation: GitHub Wiki