gluestack

gluestack是一套基于Tailwind CSS（NativeWind）的React与React Native组件库，通过复制粘贴预构建组件和模式，解决跨平台UI开发中一致性与自定义效率的矛盾。

核心能力

gluestack提供30+响应式组件（含Typography、Layout、Feedback、Data Display、Forms、Overlay、Media等类别），支持按需安装（npx gluestack-ui add button）而非全量引入，组件代码直接复制到项目源码中，开发者可自由修改Tailwind类。

• 跨平台一致代码: 同一套组件在Next.js和Expo项目中运行，减少平台适配工作
• NativeWind原生支持: 组件基于Tailwind CSS v4 + PostCSS（NativeWind v5）或UniWind（Expo专用，无PostCSS）
• CLI自动化配置: npx gluestack-ui init自动检测项目类型，配置Provider、metro.config.js、babel.config.js等
• Kitchensink演示应用: 官方提供综合Demo App，展示所有组件实际效果
• Figma UI Kit: 提供设计稿资源，方便设计与开发对齐

安装与上手

gluestack v5当前不支持Next.js（需等待NativeWind v5支持Web），推荐用于Expo（≥50）或React Native（≥0.72.5）项目。安装分两步：初始化（npx gluestack-ui init）后按需添加组件（npx gluestack-ui add <组件名>）。

• 前置条件: Node 16+，Expo ≥50或React Native ≥0.72.5
• 样式引擎选择: NativeWind v5（Expo/RN CLI）或UniWind（Expo-only，无需PostCSS）
• 组件添加示例: npx gluestack-ui add button后，组件文件复制到项目components/ui/目录
• 常见问题: Expo在iOS重建时可能卡在tailwindcss重建，需手动解决配置冲突

生态与扩展

gluestack提供多种配套资源：Dashboard App、Todo App、Starter Kit等模板；与RapidNative（AI生成原生应用）、AppLighter（AI全栈Expo Starter）、FlyDash（AI内部工具仪表盘）等合作伙伴集成。

• 社区渠道: Twitter（公告）、GitHub（Issue/贡献）、Discord（讨论/问答）、Stackoverflow（开发者互助）
• 升级路径: 提供v2v5的升级指南，以及Changelog和Roadmap
• AI辅助: 支持“Prompt to React Native UI”功能，通过提示词生成组件
• LLMs.txt资源: 提供LLMs.txt和LLMs-full.txt文件，便于大模型索引文档

常见问题

Q1：gluestack v5支持Next.js吗？

A1：目前不支持。官方说明v5需等待NativeWind v5增加Web支持，Next.js项目应使用v4文档。

Q2：gluestack组件如何按需安装？

A2：使用CLI命令npx gluestack-ui add <组件名>（如button），组件代码会复制到项目components/ui/目录下，非全量引入。

Q3：gluestack与NativeBase是什么关系？

A3：gluestack UI是NativeBase的下一代进化产品（重塑版），原生支持Tailwind CSS（NativeWind），而非NativeBase的样式系统。

更多同类工具与网站,可在React分类继续挑选。

信息核实于 2026年7月,具体以官网为准。