# @coreui/react 中文文档 规范地址：https://npmcn.com/package/%40coreui/react/ 版本：5\.13\.1 npm 元数据更新时间：2026-10-04T16:40:00.707Z 中文译文更新时间：2026-11-10T19:19:39.382Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40coreui/react 原文对照：https://npmcn.com/package/%40coreui/react/?lang=original 项目主页：https://coreui.io/react/ 源码仓库：https://github.com/coreui/coreui-react ## 关键信息（来自 npm 元数据） - 包体积（解压后）：2.1 MB，1398 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：3 个 - peer 依赖：react \>=17，react-dom \>=17 - 首次发布：2017-09-28T10:34:03.364Z - 最新版本发布：2026-10-04T16:40:00.560Z - 近 30 天下载量：423109（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：175（近 12 个月 6 个） ## 中文简介 React.js 的 UI 组件库 ## 安装 ```sh npm install @coreui/react ``` 也可以使用：`pnpm add @coreui/react`、`yarn add @coreui/react`、`bun add @coreui/react` ## README [![CoreUI logo](https://coreui.io/images/brand/coreui-signet.svg)](https://coreui.io/) ### React.js 的核心UI React.js 组件库建于"靴子"5和"TypeScript"上方. [**探索用于 react.js docs 的 CoreUI 工具**](https://coreui.io/react/docs/getting-started/introduction) [报告错误](https://github.com/coreui/coreui-react/issues/new?template=bug_report.md) • 妇女 [请求特性](https://github.com/coreui/coreui-react/issues/new?template=feature_request.md) • 妇女 [博客](https://coreui.io/blog/) ## 目录 - [快开始](https://npmcn.com/package/%40coreui/react/#readme-quick-start) - [构成部分](https://npmcn.com/package/%40coreui/react/#readme-components) - [状态](https://npmcn.com/package/%40coreui/react/#readme-status) - [错误和特性请求](https://npmcn.com/package/%40coreui/react/#readme-bugs-and-feature-requests) - [文档](https://npmcn.com/package/%40coreui/react/#readme-documentation) - [框架](https://npmcn.com/package/%40coreui/react/#readme-frameworks) - [模板](https://npmcn.com/package/%40coreui/react/#readme-templates) - [数据网格](https://npmcn.com/package/%40coreui/react/#readme-data-grid) - [捐款](https://npmcn.com/package/%40coreui/react/#readme-contributing) - [社区](https://npmcn.com/package/%40coreui/react/#readme-community) - [版本](https://npmcn.com/package/%40coreui/react/#readme-versioning) - [创建者](https://npmcn.com/package/%40coreui/react/#readme-creators) - [支持核心UI开发](https://npmcn.com/package/%40coreui/react/#readme-support-coreui-development) - [版权和许可证](https://npmcn.com/package/%40coreui/react/#readme-copyright-and-license) ## 快开始 ### 安装 有几个快速启动选项: - [下载最新版本](https://github.com/coreui/coreui-react/archive/v5.13.1.zip) - 克隆还原器 : `git clone https://github.com/coreui/coreui-react.git` - 安装方式 [无](https://www.npmjs.com/)数字 : `npm install @coreui/react` - 安装方式 [线条](https://yarnpkg.com/)数字 : `yarn add @coreui/react` 读取 [正在启动页面](https://coreui.io/react/docs/getting-started/introduction/) 用于提供框架内容、模板和实例等方面的信息. ### 样式表 反应组件使用 `@coreui/coreui` CSS库,但也可以使用有靴子的CSS库. 这是可能的,因为 `@coreui/coreui` 库与靴子陷阱兼容, 它只是扩展其功能。 唯一的例外是自定义 CoreUI 组件,在靴子生态系统中并不存在. #### CoreUI CSS 文件 ##### 安装 ```bash yarn add @coreui/coreui ``` 或者说 ```bash npm install @coreui/coreui --save ``` ##### 基本用途 ```js import '@coreui/coreui/dist/css/coreui.min.css' ``` #### Bootstrap CSS 文件 : ##### 安装 ```bash yarn add bootstrap ``` 或者说 ```bash npm install bootstrap ``` ##### 基本用途 ```js import "bootstrap/dist/css/bootstrap.min.css"; ``` ## 构成部分 - [反应协议](https://coreui.io/react/docs/components/accordion/) - [反应提醒](https://coreui.io/react/docs/components/alert/) - [反应"神通"](https://coreui.io/react/docs/components/avatar/) - [反弹徽章](https://coreui.io/react/docs/components/badge/) - [反应面包屑](https://coreui.io/react/docs/components/breadcrumb/) - [反应按钮](https://coreui.io/react/docs/components/button/) - [反应按钮组](https://coreui.io/react/docs/components/button-group/) - [响应点名](https://coreui.io/react/docs/components/callout/) - [反应卡](https://coreui.io/react/docs/components/card/) - [反应木马](https://coreui.io/react/docs/components/carousel/) - [反应复选框](https://coreui.io/react/docs/forms/checkbox/) - [反应关闭按钮](https://coreui.io/react/docs/components/close-button/) - [重现折叠](https://coreui.io/react/docs/components/collapse/) - [反应取日期器](https://coreui.io/react/docs/forms/date-picker/) **支持** - [反应日期范围拾取器](https://coreui.io/react/docs/forms/date-range-picker/) **支持** - [反应下拉](https://coreui.io/react/docs/components/dropdown/) - [反应浮标](https://coreui.io/react/docs/forms/floating-labels/) - [反应页脚](https://coreui.io/react/docs/components/footer/) - [反应信头](https://coreui.io/react/docs/components/header/) - [反射图像](https://coreui.io/react/docs/components/image/) - [反应输入](https://coreui.io/react/docs/forms/input/) - [反应输入组](https://coreui.io/react/docs/forms/input-group/) - [反应列表组](https://coreui.io/react/docs/components/list-group/) - [重新装入按钮](https://coreui.io/react/docs/components/loading-button/) **支持** - [重现 Modal](https://coreui.io/react/docs/components/modal/) - [反弹多选项](https://coreui.io/react/docs/forms/multi-select/) **支持** - [重现导航标签( T)](https://coreui.io/react/docs/components/navs-tabs/) - [反射导航栏](https://coreui.io/react/docs/components/navbar/) - [反演 Offcanvas 游戏](https://coreui.io/react/docs/components/offcanvas/) - [反射 PGination](https://coreui.io/react/docs/components/pagination/) - [反应占位符](https://coreui.io/react/docs/components/placeholder/) - [反应弹出器](https://coreui.io/react/docs/components/popover/) - [反应进度](https://coreui.io/react/docs/components/progress/) - [反应电台](https://coreui.io/react/docs/forms/radio/) - [反应范围](https://coreui.io/react/docs/forms/range/) - [反应评分](https://coreui.io/react/docs/forms/rating/) - [反应选择](https://coreui.io/react/docs/forms/select/) - [反弹侧边栏](https://coreui.io/react/docs/components/sidebar/) - [反应智能相接](https://coreui.io/react/docs/components/smart-pagination/) **支持** - [反应智能表格](https://coreui.io/react/docs/components/smart-table/) **支持** - [反弹自旋器](https://coreui.io/react/docs/components/spinner/) - [反应开关](https://coreui.io/react/docs/forms/switch/) - [反应表格](https://coreui.io/react/docs/components/table/) - [重复文本区域](https://coreui.io/react/docs/forms/textarea/) - [反应时间拾取器](https://coreui.io/react/docs/forms/time-picker/) **支持** - [反射托斯特语Name](https://coreui.io/react/docs/components/toast/) - [反应工具提示](https://coreui.io/react/docs/components/tooltip/) ## 状态 [![npm version](https://img.shields.io/npm/v/@coreui/react)](https://www.npmjs.com/package/@coreui/react) ## 错误和特性请求 有错误或特性请求吗? 请先读一下 [问题指南](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md#using-the-issue-tracker) 并寻找现有和已解决的问题。 如果你的问题或想法还没有解决, [请开一期](https://github.com/coreui/coreui-react/issues/new)。 。 。 . ## 文档 CoreUI & CoreUI PRO的文件由我们的网站托管 [反应的 CoreUI](https://coreui.io/react/docs/getting-started/introduction) ### 正在本地运行文档 1. 运行 `yarn install` 或者说 `npm install` 以安装Node.js依赖. 2. 运行 `yarn bootstrap` 或者说 `npm run bootstrap` 连接本地软件包并安装剩余软件包的依赖性. 3. 从根目录中运行 `yarn docs:dev` 或者说 `npm run docs:dev` (或特定 npm 脚本) 重建已分发的 CSS 和 JavaScript 文件, 以及我们的文件库 . 4. 打开 `http://localhost:8000/` 在你的浏览器里, 和voilà. ## 框架 CoreUI支持最受欢迎的框架. - [Angular 的核心UI](https://github.com/coreui/coreui-angular) - [CoreUI for Bootstrap (瓦努阿图联署材料)](https://github.com/coreui/coreui) - [反应的 CoreUI](https://github.com/coreui/coreui-react) - [用于 Vue 的 CoreUI](https://github.com/coreui/coreui-vue) ## 模板 根据 CoreUI 为您的应用程序设置了功能齐全的外框模板 . - [角管理模板](https://coreui.io/angular) - [Bootstrap 管理员模板](https://coreui.io/) - [反应管理模板](https://coreui.io/react) - [Vue 管理员模板](https://coreui.io/vue) ## 数据网格 CoreUI React Data Grid 处理10万+行,有排序,过滤,虚拟化,列针化,内置编辑和CSV导出——使用你已经使用的相同的标记和样式表. ```bash npm install @coreui/react-data-grid ``` 一个许可证还覆盖了JavaScript,Vue和Angular. 这是单独的加法,不是CoreUI PRO的一部分. - [反应数据网格](https://coreui.io/data-grid/react/?src=readme-react-npm) - [文档](https://coreui.io/data-grid/react/docs/getting-started/introduction/?src=readme-react-npm) ## 捐款 请读读我们的 [提供指南](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md)其中包括开发问题的方向、编码标准和关于发展的说明. 编辑器首选项在 [编辑器配置](https://github.com/coreui/coreui-react/blob/v4/.editorconfig) 以方便在普通文本编辑器中使用。 更多阅读和下载插件 [https://editorconfig.org/ (中文(简体) )](https://editorconfig.org/)。 。 。 . ## 社区 随时了解CoreUI的发展情况,利用这些有用资源与社区联系. - 阅读和订阅 [官方 CoreUI 博客](https://coreui.io/blog/)。 。 。 . 你也可以跟着 [@core ui 在推特上](https://twitter.com/core_ui)。 。 。 . ## 版本 为了提高发布周期的透明度并努力保持后向相容性,CoreUI被保留在 [语义版准则](http://semver.org/)。 。 。 . 见 [我们的项目的释放部分](https://github.com/coreui/coreui-react/releases) 每个发行版本的更改日志. ## 创建者 **库克什·霍雷克** - [https://twitter.com/lukaszholeczek 页面存档备份,存于互联网档案馆](https://twitter.com/lukaszholeczek) - [https://github.com/mrholek 页面存档备份,存于互联网档案馆](https://github.com/mrholek) **安杰伊·科潘斯基** - [https://github.com/xidedix (中文(简体) )](https://github.com/xidedix) **CoreUI团队** - [https://github.com/orgs/coreui/people (中文(简体) )](https://github.com/orgs/coreui/people) ## 支持核心UI开发 CoreUI是一个麻省理工学院许可的开源项目,完全可以自由使用. 然而,如果没有适当的财政支助,维持和开发项目新特点所需的努力是不可持续的。 您可以通过购买支持开发 [CoreUI Pro 软件公司](https://coreui.io/pricing/) 或经由下列途径成为提案国: [开放集体](https://opencollective.com/coreui/)。 。 。 . ### 白金赞助商 支持该项目的有: [成为白金赞助商](https://opencollective.com/coreui/contribute/platinum-sponsor-40959/)。这里将添加一个大公司的标志,并链接到您的网站. [![](https://opencollective.com/coreui/tiers/platinum-sponsor/0/avatar.svg?avatarHeight=100)](https://opencollective.com/coreui/contribute/platinum-sponsor-40959/checkout) ### 黄金赞助商 支持该项目的有: [成为黄金赞助商](https://opencollective.com/coreui/contribute/gold-sponsor-40960/)。这里将添加一个大公司标志,并链接到您的网站. [![](https://opencollective.com/coreui/tiers/gold-sponsor/0/avatar.svg?avatarHeight=100)](https://opencollective.com/coreui/contribute/gold-sponsor-40960/checkout) ### 白银赞助商 支持该项目的有: [成为银色赞助商](https://opencollective.com/coreui/contribute/silver-sponsor-40967/)。这里将添加一个中型公司的标志,并链接到您的网站. [![](https://opencollective.com/coreui/tiers/gold-sponsor/0/avatar.svg?avatarHeight=100)](https://opencollective.com/coreui/contribute/silver-sponsor-40967/checkout) ### 青铜赞助商 支持该项目的有: [成为铜制赞助商](https://opencollective.com/coreui/contribute/bronze-sponsor-40966/)。Avatar公司将在这里出现 链接到你的 OpenCollective 简介. [![](https://opencollective.com/coreui/tiers/bronze-sponsor/0/avatar.svg?avatarHeight=100)](https://opencollective.com/coreui/contribute/bronze-sponsor-40966/checkout) ### 备份 感谢所有支持者和赞助商! 支持该项目的有: [成为后卫](https://opencollective.com/coreui/contribute/backer-40965/)。 。 。 . [![](https://opencollective.com/coreui/backers.svg?width=890)](https://opencollective.com/coreui/contribute/backer-40965/checkout) ## 版权和许可证 版权2026年创作"Labs"-"ukasz Holeczek". 代码根据 [MIT 许可证](https://github.com/coreui/coreui-react/blob/main/LICENSE)。根据 [创意常识](https://creativecommons.org/licenses/by/3.0/)。 。 。 . ## 常见问题 ### @coreui/react 是什么？ React\.js 的 UI 组件库 ### 如何安装 @coreui/react？ 在项目目录运行 npm install @coreui/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=17）、react-dom（\>=17）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @coreui/react 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @coreui/react 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @coreui/react 可以商用吗？ @coreui/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @coreui/react 的下载量有多少？ 根据 npm 官方下载统计，@coreui/react 在 2026/10/11 – 2026/11/09 这 30 天内被下载 423,109 次，日均约 14,104 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @coreui/react 还在维护吗？ 最新版本 5\.13\.1 发布于 2026/10/05（1 个月前）；至今共发布 175 个版本，其中过去 12 个月发布了 6 个；首次发布于 2017/09/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。