# @factorialco/f0-react 中文文档 规范地址：https://npmcn.com/package/%40factorialco/f0-react/ 版本：14\.13\.1 npm 元数据更新时间：2026-11-13T15:27:08.424Z 中文译文更新时间：2026-11-14T08:24:14.514Z 软件包许可：未声明 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40factorialco/f0-react 原文对照：https://npmcn.com/package/%40factorialco/f0-react/?lang=original 项目主页：https://github.com/factorialco/f0#readme 源码仓库：https://github.com/factorialco/f0 ## 关键信息（来自 npm 元数据） - 包体积（解压后）：40.8 MB，1350 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：93 个 - peer 依赖：zod ^3\.23\.8，clsx ^2\.1\.1，ress ^5\.0\.2，react 18\.3\.1，motion ^12\.34\.5，nanoid ^5\.0\.7，date-fns ^3\.6\.0，recharts ^2\.12\.7，react-dom 18\.3\.1，react-pdf ^9\.2\.1，pdfjs-dist 4\.8\.69，typescript ^5\.7\.2 \|\| ^6\.0\.0 \|\| ^7\.0\.0，maplibre-gl ^5\.24\.0，tailwindcss ^3\.4\.3，usehooks-ts ^3\.1\.1，lucide-react ^0\.383\.0，@xyflow/react ^12，react-masonry ^1\.0\.7，livekit-client ^2\.17\.0，tailwind-merge ^2\.3\.0，twemoji-parser ^14\.0\.0，canvas-confetti ^1\.9\.3，react-hook-form ^7\.52\.1，react-day-picker ^8\.10\.1，@number-flow/react ^0\.5\.10，@hookform/resolvers ^3\.9\.0，tailwindcss-animate ^1\.0\.7，@radix-ui/react-slot ^1\.1\.0，@radix-ui/react-tabs ^1\.0\.4，@radix-ui/react-label ^2\.1\.0，@radix-ui/react-avatar ^1\.0\.4，@radix-ui/react-dialog ^1\.1\.4，@radix-ui/react-select ^2\.0\.0，@radix-ui/react-toggle ^1\.1\.0，@radix-ui/react-popover ^1\.0\.7，@radix-ui/react-checkbox ^1\.0\.4，@radix-ui/react-progress ^1\.1\.0，@livekit/components-react ^2\.9\.19，@radix-ui/react-accordion ^1\.1\.2，@mapbox/mapbox-gl-rtl-text 0\.2\.3，@radix-ui/react-collapsible ^1\.1\.2，@radix-ui/react-scroll-area ^1\.0\.5，@radix-ui/react-toggle-group ^1\.1\.0，@radix-ui/react-dropdown-menu ^2\.0\.6，@tailwindcss/container-queries ^0\.1\.1，@radix-ui/react-navigation-menu ^1\.2\.0 - 首次发布：2025-09-11T12:59:24.866Z - 最新版本发布：2026-11-13T15:27:08.224Z - 近 30 天下载量：295250（2026-10-14 至 2026-11-12，npm 官方下载统计） - 已发布版本数：1267（近 12 个月 1103 个） ## 中文简介 F0代表了视觉语言为"阶梯"平台的变革性再起. 其核心任务是加强Inductial用户界面的一致性和连贯性,同时确保快速、高效和令人愉快的用户和开发者Exper ## 安装 ```sh npm install @factorialco/f0-react ``` 也可以使用：`pnpm add @factorialco/f0-react`、`yarn add @factorialco/f0-react`、`bun add @factorialco/f0-react` ## README F0 代表了视觉语言的变革性再起,用于“因子” 平台。 其核心任务是加强整个组织的一致性和连贯性 阶乘的用户界面,同时确保快速、高效和令人愉快 用户和开发者的经验. ## 为什么是F0? 随着"阶地"的演化,它扩展为一套复杂的特征和 功能,导致用户体验分散. 各部门 平台显示不一致的视觉样式和互动. 这样一来,我们两个用户的维护和可扩展性就变得复杂了 经验与代码库. 我们经常发现自己 投入过多的时间去 重塑方向盘并解决错误和不一致之处而不是 增强我们的产品, 我们的用户被留下一个混乱, 脱节 经历. ## 为什么重启我们的设计系统? 我们现有的设计系统叫做"Gamma" 是在非正式的基础上建立的 限制是无法经受时间考验的。 尽管增加了新的 基础已经削弱到 他们大多变得无用. 经过彻底评估,我们决定一个新的开始是至关重要的. 我们 需要将我们的旧设计规则与新的设计规则明确区分开来 支持未来增长的基础. 以下是重启设计系统的几个好处: - **清晰的视野**:设计系统受制约而兴起. 以前,我们 添加没有明确方向的组件和样式, 复杂性增加, 导致一个难以有效利用的系统. - **完全响应**:我们的目标是提供有助于 在所有设备之间创建反应性接口,以补充我们的移动 应用并确保一致性. - **外部开发者的可用性**:有详细记录和易于使用 外部开发者可以和我们 观想觉想以因果生态系统为依托. - **无障碍**:确保我们的平台对所有人开放, 无论他们的能力如何,都是优先事项。 这意味着侧重于 利用我们的组件. - **强健性**:我们的目标是让与F0的每一次互动都具有特异性. 这包括对各组成部分进行全面测试,以保持一致性 一致性. ## 原则 - **一致性**: 以"因果"的庞大特征,一种连贯的视觉语言 是帮助用户导航和利用其经验的关键 平台. - **效率**: 设计效率,F0辅助用户完成任务 迅速而无缝. - **可享用性**: 我们的目标是让用户享受他们与"因素"的互动. 具有视觉吸引力和连贯的经验对F0至关重要. ## 技术选择 F0是使用主要技术设计的: - **反应**: 此设计系统基于 React, 领先的 JavaScript 用于构建用户界面的库. - **类型脚本**: 用于坚固、可维护的代码和增强的开发者 体验惊人的开发者工具. - **尾风**:我们选择了通用第一CSS框架,促进快速, 持续UI发展. - **沙克恩语Name** 财务报告和审定财务报表 **半径** 为我们提供一个强大和可及的基准 组件. # 如何使用 F0 ? 为整合F0, 安装为依赖性: $pnpm 安装 @ factorialco/ f0- react 在您的应用程序中导入其样式( 通常是主. tsx 或类似的) : ```tsx import "@factorialco/f0-react/dist/styles.css" ``` F0与Inter一起设计. 如果您的应用程序尚未为 Inter 服务, 请导入 F0的拷贝也: ```tsx import "@factorialco/f0-react/assets/fonts/style.css" ``` 然后,您可以利用其任何组成部分: ```tsx import { Button } from "@factorialco/f0-react" ``` ## 常见问题 ### @factorialco/f0-react 是什么？ F0代表了视觉语言为"阶梯"平台的变革性再起\. 其核心任务是加强Inductial用户界面的一致性和连贯性,同时确保快速、高效和令人愉快的用户和开发者Exper ### 如何安装 @factorialco/f0-react？ 在项目目录运行 npm install @factorialco/f0-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：zod（^3\.23\.8）、clsx（^2\.1\.1）、ress（^5\.0\.2）、react（18\.3\.1）、motion（^12\.34\.5）、nanoid（^5\.0\.7）、date-fns（^3\.6\.0）、recharts（^2\.12\.7）、react-dom（18\.3\.1）、react-pdf（^9\.2\.1）、pdfjs-dist（4\.8\.69）、typescript（^5\.7\.2 \|\| ^6\.0\.0 \|\| ^7\.0\.0）、tailwindcss（^3\.4\.3）、usehooks-ts（^3\.1\.1）、lucide-react（^0\.383\.0）、@xyflow/react（^12）、react-masonry（^1\.0\.7）、livekit-client（^2\.17\.0）、tailwind-merge（^2\.3\.0）、twemoji-parser（^14\.0\.0）、canvas-confetti（^1\.9\.3）、react-hook-form（^7\.52\.1）、react-day-picker（^8\.10\.1）、@number-flow/react（^0\.5\.10）、@hookform/resolvers（^3\.9\.0）、tailwindcss-animate（^1\.0\.7）、@radix-ui/react-slot（^1\.1\.0）、@radix-ui/react-tabs（^1\.0\.4）、@radix-ui/react-label（^2\.1\.0）、@radix-ui/react-avatar（^1\.0\.4）、@radix-ui/react-dialog（^1\.1\.4）、@radix-ui/react-select（^2\.0\.0）、@radix-ui/react-toggle（^1\.1\.0）、@radix-ui/react-popover（^1\.0\.7）、@radix-ui/react-checkbox（^1\.0\.4）、@radix-ui/react-progress（^1\.1\.0）、@livekit/components-react（^2\.9\.19）、@radix-ui/react-accordion（^1\.1\.2）、@radix-ui/react-collapsible（^1\.1\.2）、@radix-ui/react-scroll-area（^1\.0\.5）、@radix-ui/react-toggle-group（^1\.1\.0）、@radix-ui/react-dropdown-menu（^2\.0\.6）、@tailwindcss/container-queries（^0\.1\.1）、@radix-ui/react-navigation-menu（^1\.2\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @factorialco/f0-react 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @factorialco/f0-react 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @factorialco/f0-react 可以商用吗？ @factorialco/f0-react 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### @factorialco/f0-react 的下载量有多少？ 根据 npm 官方下载统计，@factorialco/f0-react 在 2026/10/14 – 2026/11/12 这 30 天内被下载 295,250 次，日均约 9,842 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @factorialco/f0-react 还在维护吗？ 最新版本 14\.13\.1 发布于 2026/11/13（今天）；至今共发布 1267 个版本，其中过去 12 个月发布了 1103 个；首次发布于 2025/09/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。