npm package: @lzzjokerzzl/react-ui-components
Description: A comprehensive React UI component library with animations, built with TypeScript and Tailwind CSS
Author: Alex Buelvas
Latest version: 1.4.9

# @lzzjokerzzl/react-ui-components

A comprehensive React UI component library with animations, built with TypeScript and Tailwind CSS. Compatible with React and Next.js.

## Features

- 🎨 **Modern Design**: Clean and professional UI components
- ⚡ **Smooth Animations**: Powered by Framer Motion
- 🔧 **TypeScript Support**: Full type safety and IntelliSense
- 🎯 **Tailwind CSS**: Utility-first CSS framework integration
- 📱 **Responsive**: Mobile-first responsive design
- ♿ **Accessible**: ARIA compliant components
- 🎭 **Customizable**: Flexible styling with variants
- 🚀 **Performance**: Optimized for production
- ⚛️ **Framework Compatible**: Works with React and Next.js

## Installation

```bash
npm install @lzzjokerzzl/react-ui-components
# or
yarn add @lzzjokerzzl/react-ui-components
# or
pnpm add @lzzjokerzzl/react-ui-components
# or
bun add @lzzjokerzzl/react-ui-components
```

## Quick Start

```tsx
import { Button, Badge, Modal } from "@lzzjokerzzl/react-ui-components";
import "@lzzjokerzzl/react-ui-components/styles";

function App() {
  return (
    <div>
      <Badge content="5" variant="solid" color="primary">
        <Button>Notifications</Button>
      </Badge>
    </div>
  );
}
```

## Components

### Basic Components

- **Accordion** - Collapsible content sections
- **Autocomplete** - Search input with suggestions
- **Avatar** - User profile pictures with initials fallback
- **Badge** - Notification indicators and labels
- **Button** - Interactive buttons with multiple variants
- **Card** - Content containers with various styles  
- **Checkbox** - Checkbox inputs with custom styling
- **Chip** - Compact elements for labels and filters
- **Image** - Optimized images with loading states
- **Input** - Form inputs with validation states
- **Pagination** - Page navigation controls
- **Progress** - Progress indicators and loading bars
- **Spinner** - Loading spinners with different styles
- **Switch** - Toggle switches for boolean values
- **Toast** - Notification messages and alerts
- **Tooltip** - Contextual information overlays
- **User** - User profile display components

### Layout & Navigation

- **Breadcrumb** - Navigation breadcrumbs
- **Modal** - Overlay dialogs and popups
- **Navbar** - Navigation bars and headers
- **Sidebar** - Collapsible sidebar navigation
- **Table** - Data tables with sorting and pagination

### Animation Components

- **AnimatedContainer** - Fade, slide, scale, bounce, flip, stagger, morphing, and parallax containers
- **Animation** - Basic animation components (FadeIn, SlideIn, ScaleIn, RotateIn, Bounce, Stagger)
- **TextAnimation** - Typewriter, reveal, counter, gradient, morphing, and glitch text effects

## Usage Examples

### Animated Containers

```tsx
import { FadeContainer, SlideContainer, BounceContainer } from '@lzzjokerzzl/react-ui-components';

<FadeContainer triggerOnce>
  <h1>This fades in when visible</h1>
</FadeContainer>

<SlideContainer direction="up" distance={50}>
  <div>This slides up from bottom</div>
</SlideContainer>

<BounceContainer intensity="high">
  <button>This bounces in</button>
</BounceContainer>
```

### Text Animations

```tsx
import { TypeWriter, RevealText, CounterText } from '@lzzjokerzzl/react-ui-components';

<TypeWriter
  text="Hello, World!"
  speed={100}
  showCursor
/>

<RevealText
  text="Revealing word by word"
  mode="word"
  preset="elegant"
/>

<CounterText
  from={0}
  to={1000}
  duration={2000}
  format="number"
/>
```

### Interactive Components

```tsx
import {
  Modal,
  useModal,
  Switch,
  Progress,
} from "@lzzjokerzzl/react-ui-components";

function Example() {
  const { isOpen, open, close } = useModal();
  const [enabled, setEnabled] = useState(false);

  return (
    <>
      <Switch
        checked={enabled}
        onChange={setEnabled}
        size="lg"
        color="primary"
      />

      <Progress value={75} variant="gradient" size="md" showLabel />

      <Modal isOpen={isOpen} onClose={close}>
        <h2>Modal Content</h2>
      </Modal>
    </>
  );
}
```

### Breadcrumb Navigation

```tsx
import { Breadcrumb, BreadcrumbItem } from '@lzzjokerzzl/react-ui-components';

function Navigation() {
  return (
    <Breadcrumb>
      <BreadcrumbItem href="/">Home</BreadcrumbItem>
      <BreadcrumbItem href="/products">Products</BreadcrumbItem>
      <BreadcrumbItem isCurrent>Laptop</BreadcrumbItem>
    </Breadcrumb>
  );
}
```

### Sidebar Navigation

```tsx
import { 
  Sidebar, 
  SidebarProvider,
  SidebarHeader, 
  SidebarContent, 
  SidebarItem, 
  SidebarFooter 
} from '@lzzjokerzzl/react-ui-components';

function AppSidebar() {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarHeader>
          <h2>My App</h2>
        </SidebarHeader>
        
        <SidebarContent>
          <SidebarItem href="/dashboard" icon={<DashboardIcon />}>
            Dashboard
          </SidebarItem>
          <SidebarItem href="/profile" icon={<ProfileIcon />}>
            Profile
          </SidebarItem>
          <SidebarItem href="/settings" icon={<SettingsIcon />}>
            Settings
          </SidebarItem>
        </SidebarContent>
        
        <SidebarFooter>
          <SidebarItem href="/logout" icon={<LogoutIcon />}>
            Logout
          </SidebarItem>
        </SidebarFooter>
      </Sidebar>
    </SidebarProvider>
  );
}
```

## Styling

This library uses Tailwind CSS for styling. Make sure you have Tailwind CSS configured in your project, or import the included styles:

```tsx
import "@lzzjokerzzl/react-ui-components/styles";
```

## TypeScript Support

All components are built with TypeScript and include comprehensive type definitions:

```tsx
import type {
  ButtonProps,
  ModalProps,
  AnimatedContainerConfig,
} from "@lzzjokerzzl/react-ui-components";
```

## Requirements

- React >= 18.0.0
- React DOM >= 18.0.0

## License

MIT © Alex Buelvas