# @bloxinine/react-component-library 中文文档

规范地址：https://npmcn.com/package/%40bloxinine/react-component-library/

版本：2\.0\.2
npm 元数据更新时间：2026-10-27T20:27:40.359Z
中文译文更新时间：2026-11-08T08:09:16.732Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bloxinine/react-component-library
原文对照：https://npmcn.com/package/%40bloxinine/react-component-library/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.9 MB，504 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2026-10-17T22:33:59.221Z
- 最新版本发布：2026-10-27T20:27:40.179Z
- 近 30 天下载量：4094（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：26（近 12 个月 26 个）

## 中文简介

用 TypeScript 创建的 AI- slop 生成的 React 组件库( 我应该开火还是升迁我的代理? )

## 安装

```sh
npm install @bloxinine/react-component-library
```

也可以使用：`pnpm add @bloxinine/react-component-library`、`yarn add @bloxinine/react-component-library`、`bun add @bloxinine/react-component-library`

## README

# 反应组件库

用 TypeScript 创建的 AI- slop 生成的 React 组件库( 我应该开火还是升迁我的代理? )

## 特征

-   **企业级UI组件:** 50+ 模块化组件,包括数据网格,图表,编辑器,导航,调度器,并形成输入.
-   **Parallax & Motion 套件 :** 高性能 60小时 `<Parallax>`视图 `<Animate>`,和苹果样式 `<ScrollPin>` 带有零配置的快手道具. 见 [Parallax 文档](https://npmcn.com/package/%40bloxinine/react-component-library/docs/PARALLAX_AND_MOTION.md)。 。 。 .
-   **响应版式容器 :** 弹性 `<Container>` 支持全屏、半屏、弹性盒、CSS网格和对齐预设的组件。 见 [集装箱文档](https://npmcn.com/package/%40bloxinine/react-component-library/docs/CONTAINER.md)。 。 。 .
-   **现代网站部分:** 插件和游戏部分 `HeroSection`, (中文(简体) ), `LogoCloud`, (中文(简体) ), `TestimonialsSection`, (中文(简体) ), `PricingSection`, (中文(简体) ), `FAQSection`,以及 `CTASection`。见 [文档](https://npmcn.com/package/%40bloxinine/react-component-library/docs/SECTIONS.md)。 。 。 .
-   **完整类型脚本支持 :** 与无害环境管理和共同JS捆绑一起发布的综合类型声明.
-   **通用主题和黑暗模式 :** 通过CSS自定义属性和"主题提供",本地光和暗模式出箱.
-   **0 配置样式 :** 包装独立 `style.css` 反应灵敏,有主题的造型.
-   **可访问( WCAG Compliant) :** 语义HTML结构,ARIA属性,键盘导航,和焦点管理.

* * *

## 安装

```bash
npm install @bloxinine/react-component-library
```

_注:确保 `react` 财务报告和审定财务报表 `react-dom` (第18或19版)安装在您的项目中._

* * *

## 快速启动

### 1\. 导入全局样式

导入应用程序条目文件中的组件库样式表(例如, `main.tsx` 或者说 `App.tsx`:

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

### 2\. 围绕主题提供(可选但建议)

```tsx
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>
  );
}
```

* * *

## 文档

所有组件的综合指南、复制复制示例和TypeScript道具表格:

| 类别 | 指南 | 构成部分 |
| --- | --- | --- |
| 📑 **主目录** | [**组件目录**](https://npmcn.com/package/%40bloxinine/react-component-library/docs/COMPONENTS.md) | 完整字母顺序 A- Z 索引和快速启动设置 |
| 🌐 **网站部分** | [**网站部分套件**](https://npmcn.com/package/%40bloxinine/react-component-library/docs/SECTIONS.md) | 英雄科 BentoGrid、定价科、证词科、Stats科、FAQ科、CTA科、LogoCloud、脚部 |
| 📐 **布局容器( C)** | [**集装箱指南**](https://npmcn.com/package/%40bloxinine/react-component-library/docs/CONTAINER.md) | `<Container>`, (中文(简体) ), `<ContainerItem>`,全Screen, 半Screen, 有弹性和网格对齐 |
| 🍪 **Cookie 隐私( P)** | [**Cookie 政策指南**](https://npmcn.com/package/%40bloxinine/react-component-library/docs/COOKIE_POLICY.md) | `<CookieConsent>`, (中文(简体) ), `<CookiePolicyTable>`, (中文(简体) ), `<CookieSettingsButton>` |
| 🚀 **运动套件** | [**参数和运动指南**](https://npmcn.com/package/%40bloxinine/react-component-library/docs/PARALLAX_AND_MOTION.md) | `<Parallax>`, (中文(简体) ), `<Animate>`, (中文(简体) ), `<ScrollPin>`, (中文(简体) ), `useParallax`, (中文(简体) ), `ParallaxProvider` |
| 🧱 **核心先导** | [**核心组成部分**](https://npmcn.com/package/%40bloxinine/react-component-library/docs/CORE_COMPONENTS.md) | 按钮、输入、卡片、下拉、Avatar、进步栏、开关、Modal |
| 🧭 **导航** | [**导航组件**](https://npmcn.com/package/%40bloxinine/react-component-library/docs/NAVIGATION_COMPONENTS.md) | Navbar, Appbar, Sidebar, Breadcrumb, 步入, Tabs, 菜单栏, 上下文Menu, 速度拨号, 呼叫器 |
| 📝 **窗体输入( I)** | [**窗体输入( I)**](https://npmcn.com/package/%40bloxinine/react-component-library/docs/FORMS_AND_INPUTS.md) | TextBox, TextRea, NumbericTextBox, MaskedTextBox, 复选框, RadioButton, 滑动器, 评分, 彩色选取器, 日期选取器, 时间选取器, 日期选取器, 日期选取器, 日历, 签名, InPlaceEditor, WYSIWYGEditor, ComboBox, 自动完成器, 多选取器, 多选取 Colummbox, ListBox, SplitButton, Button Group, 进步按钮, Chip/Chiplist |
| 📊 **数据图表( H)** | [**数据图表( H)**](https://npmcn.com/package/%40bloxinine/react-component-library/docs/DATA_AND_CHARTS.md) | 表, ListView, TreeView, Timeline, GantChart, LineChart, BarChart, AreaChart, PieChart, DonutChart, ScoutterPlot, HeatMap, Sparkline, BulletChart, 通知Gauge, LinearGauge, 范围选择器, 条码/ QRCode |
| 💬 **反馈和AI** | [**反馈、容器和AI**](https://npmcn.com/package/%40bloxinine/react-component-library/docs/FEEDBACK_AND_AI.md) | 对话框、 工具提示、 土司、 徽章、 斯宾纳、 斯凯勒通、 安通、 分块器、 工具栏、 英雄、 ChatUI、 AIassist View、 SmartTextrea、 SmartPasteButton |

* * *

## 参数和滚动动画

轻松地创建视觉惊艳的登陆页

### 参数

将任何组件或多层场景以 `<Parallax>` 内置 a `<ParallaxProvider>`数字 :

```tsx
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>` 组件触发动画, 当元素进出视图端口时 :

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

### 平按:平"灵枢"作平. )

将滚动时的视图端口插入到擦除3D模型,硬件制作或分步披露后再发布到下一节:

```tsx
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>
  );
}
```

* * *

## 网站部分和版式

集成现代,反应快的登陆页 有高层次的路段原始和灵活的集装箱对接:

```tsx
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>
  );
}
```

* * *

## 深色模式( D)

该库通过CSS自定义属性可以完全主题化. 仅通过应用来切换光和暗模式 `.dark-theme` 或使用内置 `ThemeProvider`数字 :

```css
: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;
}
```

* * *

## 许可证

麻省理工学院 2026年

## 常见问题

### @bloxinine/react-component-library 是什么？

用 TypeScript 创建的 AI- slop 生成的 React 组件库\( 我应该开火还是升迁我的代理? \)

### 如何安装 @bloxinine/react-component-library？

在项目目录运行 npm install @bloxinine/react-component-library，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bloxinine/react-component-library 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bloxinine/react-component-library 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @bloxinine/react-component-library 可以商用吗？

@bloxinine/react-component-library 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bloxinine/react-component-library 的下载量有多少？

根据 npm 官方下载统计，@bloxinine/react-component-library 在 2026/10/09 – 2026/11/07 这 30 天内被下载 4,094 次，日均约 136 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bloxinine/react-component-library 还在维护吗？

最新版本 2\.0\.2 发布于 2026/10/28（11 天前）；至今共发布 26 个版本，其中过去 12 个月发布了 26 个；首次发布于 2026/10/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。