xlibs-components/dist/README.md

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

# Xlibs Components

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

## 🚀 Installation

```bash
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

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

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

## 📚 Component Categories

### Aceternity Components
```tsx
import { 
  AnimatedButton, 
  BackgroundGradient, 
  BorderBeam,
  FloatingNav,
  PinContainer 
} from '@xlibs/components/aceternity';
```

### MagicUI Components
```tsx
import { 
  MagicCard, 
  MagicButton, 
  AnimatedBeam,
  Confetti,
  DotPattern 
} from '@xlibs/components/magicui';
```

### ShadCN Components
```tsx
import { 
  Button, 
  Card, 
  Input, 
  Dialog,
  DropdownMenu 
} from '@xlibs/components/ui';
```

### Chart Components
```tsx
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:

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

### Default Theme Colors
- Primary: `#249e5e` (Green)
- Secondary: `#2a3289` (Blue)
- Supports light/dark modes

## 🛠️ Utilities

```tsx
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

```bash
# 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](https://github.com/your-username/xlibs/issues)
- **Documentation**: [GitHub Wiki](https://github.com/your-username/xlibs/wiki)