跳到主要内容
项目档案库 / SDK

termcn:基于 Ink 的 React 终端 UI 组件库 - 零配置安装、主题自适应、shadcn/ui 兼容,快速构建命令行应用

termcn 是一个免费开源的 React 终端 UI 组件库,基于 Ink 构建。提供零配置、主题自适应的组件,与 shadcn/ui 兼容。适用于构建 CLI 工具、终端仪表板、交互式命令行应用等。本页面介绍项目定位、安装方式、使用指南及技术实现细节。

1,153TypeScriptStar 于 2026年4月16日2026年9月18日 更新

AI 总结

termcn 是一个基于 Ink 的 React 终端 UI 组件库,提供零配置、主题自适应的组件,与 shadcn/ui 兼容,支持一键安装,助你快速构建美观的命令行应用。

中文项目介绍

termcn 是一个免费开源的 React 终端 UI 组件库,基于 Ink 构建,提供即用型、可定制的组件。它与 shadcn/ui 无缝协作,支持一键安装和零配置使用。 该项目解决开发者需要从零开始构建终端用户界面的痛点,提供现成的、可定制的组件,显著降低开发成本和时间。开发者无需处理底层终端渲染细节,可直接使用高颜值、功能丰富的组件。 适用场景包括:构建 CLI 工具;创建终端仪表板;开发交互式命令行应用;实现系统监控界面;集成 AI 聊天或审批流等复杂交互场景。 从仓库代码可见,项目采用 Next.js 构建文档站点,通过 ink-web 在浏览器中预览终端组件;支持主题切换和双 base(ink/opentui);使用 Turbopack 别名统一接口;依赖包括 Ink 6.8.0、React 19、Next.js 16 等;提供完整的示例系统和自动生成的组件注册表。

详细信息与使用说明

1. 项目定位与用途

termcn 是一个基于 Ink 的 React 终端 UI 组件库,定位为免费、开源、即用型的终端界面解决方案。它提供丰富的预制组件,包括导航、图表、AI 交互等,旨在帮助开发者快速构建现代化、美观的命令行应用程序。项目与 shadcn/ui 设计系统兼容,支持主题自适应,适用于从简单 CLI 工具到复杂交互式仪表板的各类场景。

2. 解决的问题

传统终端 UI 开发需要处理底层渲染、样式和交互逻辑,耗时且容易出错。termcn 通过提供预构建、可组合的 React 组件,解决了从零搭建终端界面的问题。开发者无需关心 Ink 的细节实现,可直接使用高抽象级别的组件,如命令菜单、图表、聊天界面等,大幅提升开发效率,降低维护成本。

3. 适用场景

termcn 适用于多种命令行应用场景:开发功能丰富的 CLI 工具;创建实时数据监控仪表板;构建交互式安装向导或配置流程;实现 AI 对话界面或工具审批流;设计系统管理控制台。其组件涵盖导航、数据可视化、表单输入等,能满足企业级和开发者工具的常见需求。

4. 安装方式

根据 package.json 和项目描述,termcn 支持通过 pnpm 或 npm 一键安装。项目指定包管理器为 [email protected],要求 Node.js 版本 >=20.9.0。安装后可通过 shadcn/ui 的 CLI 工具添加具体组件,实现零配置集成。仓库中未明确给出具体的 npm 安装命令,但遵循 shadcn/ui 的标准添加流程。

5. 使用方式

使用 termcn 组件非常简单:首先通过 shadcn CLI 添加所需组件;然后在 React 组件中直接导入使用。示例代码显示可直接引用如 `@/registry/bases/ink/ui/alert` 等路径的组件。项目提供丰富的示例文件(examples/ink/ 目录),展示 Alert、AppShell 等组件的实际用法,支持组合构建复杂界面。

6. 实现特点

termcn 采用 Next.js 构建文档站点,利用 Turbopack 优化开发体验。核心技术特点包括:通过 ink-web 在浏览器中预览终端组件;支持双 base 模式(ink 原生终端和 opentui Web 模拟终端);使用别名映射统一接口;集成 fumadocs-mdx 处理文档;自动生成示例索引和组件注册表。项目严格遵循 TypeScript,提供完整的类型定义。

思维导图

termcn
核心组件库
Ink 组件
Radix UI 集成
主题系统
文档站点
Next.js 应用
MDX 文档
组件预览
示例系统
Ink 示例
Opentui 示例
自动索引
构建脚本
示例构建
注册表生成
注册表
组件元数据
类型定义
桥接层
ink-web 适配
JSX 运行时

常见问题

termcn 是什么?

termcn 是一个基于 Ink 的 React 终端 UI 组件库,提供免费、开源、即用型的组件,帮助开发者快速构建命令行界面应用。

如何安装 termcn?

通过 pnpm 或 npm 一键安装,要求 Node.js >=20.9.0 和 pnpm >=10.28.2。安装后使用 shadcn/ui CLI 添加具体组件,实现零配置集成。

termcn 与 shadcn/ui 有什么关系?

termcn 采用与 shadcn/ui 相同的注册表格式和 CLI 工作流,可以无缝集成到基于 shadcn/ui 的项目中,共享主题和配置。

支持哪些终端组件?

提供丰富的组件,包括导航(命令菜单、标签页、侧边栏)、数据可视化(条形图、折线图、仪表盘、热力图)、AI 交互(聊天消息、流式文本、思考块)等。

如何在浏览器中预览终端组件?

项目文档站点通过 ink-web 在浏览器中渲染终端组件,支持双 base 模式(ink 原生终端和 opentui Web 模拟终端),方便开发和演示。