HextaUI 组件库怎么用？基于 shadcn/ui 的 React 组件与区块下载教程

HextaUI 是一套构建在 shadcn/ui 与 Base UI 之上的 React 组件与区块集合，面向用 AI 打造产品的开发者。它包含 65 个免费开源组件、9 个 Hooks 和 5 个工具函数，覆盖从按钮、表单到菜单、表格与聊天界面的日常需求，并通过 shadcn CLI 把源码直接复制进你的项目，代码归你所有，可读可改可长期保留。官方还提供 22 个 Pro 区块，专门解决 AI 产品上线第一天就要面对的界面问题，例如流式输出、工具调用、语音模式等。最近上线的设置区块进一步补齐了 API、个人资料、模型、账单、团队等产品后台常见板块，强调极致的用户体验与微观细节。

痛点是什么

很多开发者用 AI 生成界面时，拿到的往往只是「看起来对」的静态页面：加载、错误、空状态被跳过，动画无法中途打断，键盘操作和屏幕阅读器体验缺失，窄屏或从右到左语言下布局直接崩掉。等到真正接入模型、需要停止回复、重试、审批工具调用、切换消息版本时，才发现这些「硬状态」没人处理。免费 AI 套件通常只给你一个像样的聊天框，后续的账号、设置、账单、团队等页面还得从零手写，既费时又难以保证细节一致。

主要功能特点

HextaUI 把组件、区块与文档打包成一套可直接落地的方案，重点补上那些常被忽略的状态与交互细节。

65 个开源组件

从 Accordion 到 Video player，覆盖界面日常所需，MIT 协议免费商用。

22 个 Pro 区块

聊天线程、流式文本、工具调用、语音模式等 AI 产品首日必备界面。

设置区块上线

API、个人资料、模型、账单、团队等后台板块，细节与体验到位。

面向人与 AI 的文档

每页同步发布 Markdown，llms.txt 与 MCP 服务让助手读懂同一套 API。

为什么值得关注

它不只是又一个组件库，而是把 AI 产品真正会遇到的边界情况提前做完，并让源码留在你手里。

硬状态全部处理

加载、错误、空状态、可打断动画、键盘与读屏路径都已内置。

源码归你所有

shadcn CLI 复制源码进项目，不锁在包里，随时改随时留。

Agent 可直接安装

把 Claude Code、Cursor 指向 MCP 地址，写代码时即可查文档。

如果你正在用 React 19、Tailwind CSS v4 和 shadcn/ui 构建 AI 产品，可以前往 hextaui.com 浏览区块与文档，先免费试用 Prompt Input，再决定是否升级 Pro。