@lzzjokerzzl/react-ui-components

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

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

Installation

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

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 with router support
• Modal - Overlay dialogs and popups
• Navbar - Navigation bars and headers
• Sidebar - Collapsible sidebar navigation with router integration
• Table - Data tables with sorting and pagination

Router Components

• LibraryLink - Enhanced Link component with active state management
• Navigation - Navigation components with React Router integration
• useLibraryNavigation - Hook for programmatic navigation

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

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

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

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>
    </>
  );
}

Router Integration

The library includes router components that integrate seamlessly with React Router while maintaining backward compatibility.

Setup

For router functionality, install React Router as a peer dependency:

npm install react-router
# or
yarn add react-router

Navigation Components

Breadcrumb with Router Support

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

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

Sidebar Navigation

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

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

LibraryLink Component

import { LibraryLink } from '@lzzjokerzzl/react-ui-components';

function CustomNavigation() {
  return (
    <nav>
      <LibraryLink 
        to="/dashboard" 
        activeClassName="text-blue-500 font-bold"
        exact
      >
        Dashboard
      </LibraryLink>
      
      <LibraryLink 
        to="/profile" 
        activeClassName="text-blue-500 font-bold"
      >
        Profile
      </LibraryLink>
    </nav>
  );
}

Programmatic Navigation

import { useLibraryNavigation } from '@lzzjokerzzl/react-ui-components';

function MyComponent() {
  const { navigate, goBack, goForward } = useLibraryNavigation();
  
  const handleSaveAndRedirect = async () => {
    await saveData();
    navigate('/success', { replace: true });
  };
  
  return (
    <div>
      <button onClick={() => navigate('/profile')}>
        Go to Profile
      </button>
      <button onClick={goBack}>
        Go Back
      </button>
      <button onClick={handleSaveAndRedirect}>
        Save and Continue
      </button>
    </div>
  );
}

Backward Compatibility

All navigation components support both old (href) and new (to) props:

// Old way (still supported)
<BreadcrumbItem href="/home">Home</BreadcrumbItem>
<SidebarItem href="/dashboard">Dashboard</SidebarItem>

// New way (recommended for React Router integration)
<BreadcrumbItem to="/home">Home</BreadcrumbItem>
<SidebarItem to="/dashboard">Dashboard</SidebarItem>

When both props are provided, to takes precedence, allowing for gradual migration.

Styling

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

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

TypeScript Support

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

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

Requirements

• React >= 18.0.0
• React DOM >= 18.0.0
• React Router >= 6.0.0 (optional, for router components)

License

MIT © Alex Buelvas