React Component Library

An AI-slop-generated React component library built with TypeScript (Should I fire or promote my agent?)

Features

• Enterprise-Grade UI Components: 50+ modular components including data grids, charts, editors, navigation, schedulers, and form inputs.
• Parallax & Motion Suite: High-performance 60fps <Parallax>, viewport <Animate>, and Apple-style <ScrollPin> with zero-config shorthand props. See Parallax Documentation.
• Responsive Layout Container: Flexible <Container> component supporting full-screen, half-screen, flexbox, CSS grid, and alignment presets. See Container Documentation.
• Modern Website Sections: Plug-and-play sections including HeroSection, LogoCloud, TestimonialsSection, PricingSection, FAQSection, and CTASection. See Sections Documentation.
• Full TypeScript Support: Comprehensive type declarations emitted alongside ESM and CommonJS bundles.
• Universal Theming & Dark Mode: Native light and dark mode out-of-the-box via CSS custom properties and ThemeProvider.
• Zero Configuration Styling: Bundled standalone style.css with responsive, themeable styling.
• Accessible (WCAG Compliant): Semantic HTML structure, ARIA attributes, keyboard navigation, and focus management.

Installation

npm install @bloxinine/react-component-library

Note: Ensure react and react-dom (version 18 or 19) are installed in your project.

Quick Start

1. Import Global Styles

Import the component library stylesheet in your application entry file (e.g., main.tsx or App.tsx):

import '@bloxinine/react-component-library/style.css';

2. Wrap with ThemeProvider (Optional but Recommended)

import React from 'react';
import { ThemeProvider, Button, Card } from '@bloxinine/react-component-library';
import '@bloxinine/react-component-library/style.css';

export function App() {
  return (
    <ThemeProvider defaultTheme="dark">
      <Card title="Hello React Component Library">
        <p>A modern component library built for enterprise productivity.</p>
        <Button variant="primary" onClick={() => alert('Clicked!')}>
          Get Started
        </Button>
      </Card>
    </ThemeProvider>
  );
}

Documentation

Comprehensive guides, copy-paste examples, and TypeScript props tables for all components:

Parallax & Scroll Animations

Easily create visually stunning landing pages with scroll-driven parallax, viewport-triggered animations, and Apple-style pinned scrubbing:

Parallax

Wrap any component or multi-layered scene with <Parallax> inside a <ParallaxProvider>:

import React from 'react';
import { ParallaxProvider, Parallax, Card } from '@bloxinine/react-component-library';

export function ParallaxHero() {
  return (
    <ParallaxProvider>
      <div style={{ position: 'relative', height: '400px', overflow: 'hidden' }}>
        {/* Background layer moves slower */}
        <Parallax speed={-0.2} rotate={[-10, 10]}>
          <img src="/bg-shape.png" alt="Background" style={{ width: '100%', height: 'auto' }} />
        </Parallax>

        {/* Foreground card moves with depth */}
        <Parallax speed={0.35} scale={[0.9, 1.1]}>
          <Card title="Floating Feature Card">
            <p>Parallax depth effects made effortless.</p>
          </Card>
        </Parallax>
      </div>
    </ParallaxProvider>
  );
}

Animate on Scroll In / Scroll Out

The <Animate> component triggers animations as elements enter and exit the viewport:

import React from 'react';
import { Animate, scroll, scrollOut } from '@bloxinine/react-component-library';

export function AnimatedFeatures() {
  return (
    <div>
      {/* 1. Dual in/out prop syntax */}
      <Animate when="scroll" animation="fadeIn" exitAnimation="fadeOut" duration={0.6}>
        <div>Fades in when scrolled into view, fades out when leaving</div>
      </Animate>

      {/* 2. Rules array trigger syntax using typed constants */}
      <Animate
        triggers={[
          { when: scroll, animation: 'scaleIn', duration: 0.5 },
          { when: scrollOut, animation: 'scaleOut', duration: 0.5 }
        ]}
      >
        <div>Scales in on scroll enter, scales out on scroll exit</div>
      </Animate>
    </div>
  );
}

// Supported animations:
// 'fadeIn', 'fadeOut', 'scaleIn', 'scaleOut', 'slideUp', 'slideDown',
// 'slideLeft', 'slideRight', 'zoomIn', 'zoomOut', 'flipIn', 'flipOut',
// 'bounceIn', 'rotateIn', 'rotateOut', 'blurIn', 'pulse', 'shake'
// (Also accepts space-separated aliases like "fade in", "scale out")

ScrollPin (Apple-Style Pinned Scrubbing)

Pin the viewport during scroll to scrub 3D models, hardware renders, or step-by-step disclosures before releasing to the next section:

import React from 'react';
import { ScrollPin } from '@bloxinine/react-component-library';

export function ProductShowcase() {
  return (
    <ScrollPin
      scrollDistance="300vh"
      topOffset="60px"
      pinHeight="calc(100vh - 80px)"
      stepCount={3}
      showProgressBar={true}
    >
      {({ progress, activeStep, isPinned, scrollToStep }) => (
        <div style={{ textAlign: 'center', padding: '2rem' }}>
          <h2>Interactive Showcase ({isPinned ? 'Locked' : 'Unlocked'})</h2>
          <p>Active Step: {activeStep + 1} of 3 | Progress: {(progress * 100).toFixed(0)}%</p>
          <button onClick={() => scrollToStep((activeStep + 1) % 3)}>
            Next Step →
          </button>
        </div>
      )}
    </ScrollPin>
  );
}

Website Sections & Layout

Assemble modern, responsive landing pages with high-level section primitives and flexible container alignment:

import React from 'react';
import { Container, LogoCloud, TestimonialsSection } from '@bloxinine/react-component-library';

export function LandingPage() {
  return (
    <Container display="flex" direction="vertical" gap="4rem">
      {/* Infinite Seamless Logo Marquee */}
      <LogoCloud
        title="Trusted by engineering teams"
        variant="marquee"
        speedSeconds={25}
        logos={[
          { name: 'AcmeCorp', icon: '⚡' },
          { name: 'VentureScale', icon: '🔺' },
          { name: 'NextWave', icon: '🌊' },
          { name: 'ApexCloud', icon: '☁️' }
        ]}
      />

      {/* Infinite Seamless Testimonial Marquee */}
      <TestimonialsSection
        tag="Customer Stories"
        title="Trusted by creators worldwide"
        layout="marquee"
        speedSeconds={35}
        testimonials={[
          {
            quote: "This library completely changed our delivery velocity.",
            author: "Sarah Lin",
            role: "Head of Product",
            company: "VentureScale",
            rating: 5,
            verified: true
          },
          {
            quote: "Production-ready components with zero layout jitter.",
            author: "David Chen",
            role: "Staff Engineer",
            company: "HyperCloud",
            rating: 5,
            verified: true
          }
        ]}
      />
    </Container>
  );
}

Theming & Dark Mode

The library is completely themeable via CSS custom properties. Toggle between light and dark mode simply by applying .dark-theme or using the built-in ThemeProvider:

:root {
  --bg-page: #f8fafc;
  --bg-surface: #ffffff;
  --bg-subtle: #f1f5f9;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-main: #e2e8f0;
}

.dark-theme {
  --bg-page: #0b0f17;
  --bg-surface: #151d2c;
  --bg-subtle: #1e293b;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border-main: #334155;
}

License

MIT © Bloxinine 2026