UI 组件总览

这一组更适合按三层来读：

• Tailwind CSS：设计 token、布局语言、响应式和主题底座
• 现成组件库：HeroUI 这类带默认视觉和交互完成度的方案
• Headless / 跨端体系：Base UI、gluestack-ui 这类更强调控制力或多端统一的路线

如果当前项目还没定样式底座，通常先看 Tailwind；如果已经明确想要成熟组件层，再看 HeroUI；如果更关注控制权和长期自建设计系统，再看 Base UI。

📄️Tailwind CSS

Tailwind CSS 在前端项目里的位置，既不是传统意义上的“组件库”，也不是单纯的类名集合。它更像一层设计系统底座：把颜色、间距、圆角、排版、响应式规则先收成统一语言，再决定上面接 HeroUI、Base UI、业务组件，还是完全手写。

📄️HeroUI

HeroUI 就是原来的 NextUI。进入 v3 之后，这套库的定位已经更清楚了：它不是单纯给 React 项目补几个漂亮按钮，而是一套建立在 Tailwind CSS v4、React Aria Components 和 CSS variables 之上的完整组件体系。

📄️Base UI：把自己从组件样式的泥潭里捞出来

如果曾经为了改一个 Ant Design 或者 MUI 的默认样式而写了几十行 !important，或者在深夜纠结为什么手写的下拉菜单无法用键盘操作，那 Base UI 就很值得了解。

📄️gluestack-ui v2 核心指南

gluestack-ui v2 是一个高性能、跨平台的 UI 组件库，旨在为 Web (React/Next.js) 和 Mobile (React Native) 提供统一的开发体验。它是 NativeBase 的官方继承者，但在性能和开发范式上有了质的飞跃。

📄️mapcn 地图组件库

mapcn 是一个受 shadcn/ui 启发的开源地图组件库，专为 React 打造。它基于 MapLibre GL 和 Tailwind CSS，旨在提供美观、可访问且高度可定制的地图组件。