flutter-shadcn-ui
Flutter版的Shadcn UI组件库，提供美观、可定制的UI组件。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：flutter-shadcn-ui。 它的用途是：Flutter版的Shadcn UI组件库，提供美观、可定制的UI组件。 完整的 Skill 内容见：https://321skill.com/skills/flutter-shadcn-ui/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用Flutter开发一个设置页面，需要一个包含开关、选择器和文本输入的表单，风格要现代简洁。” AI可以建议你使用 Flutter ShadcnUI 库，并给出引入 `shadcn_ui` 包、使用其 `Card`、`Form`、`Switch`、`Select` 和 `Input` 组件来快速搭建符合要求的界面的代码示例和配置说明。
介绍
Flutter ShadcnUI 是一个将流行的 Shadcn UI 设计风格移植到 Flutter 框架中的组件库。它解决了 Flutter 开发者在构建现代化、美观且风格统一的用户界面时，缺乏开箱即用、设计精良且高度可定制组件集合的痛点。开发者无需从零开始设计基础组件，可以直接使用这套符合现代设计趋势的UI元素，显著提升开发效率。
使用方式非常简单，开发者可以通过 pub.dev 安装 shadcn_ui 包，并参照其详细的在线文档来了解每个组件的属性、方法和示例代码。库中提供了丰富的组件，如按钮、表单、对话框、日历等，开发者可以像使用任何其他Flutter组件一样，通过导入包并实例化组件来快速构建界面。
这个库非常适合所有使用 Flutter 进行跨平台应用开发的工程师，无论是构建个人项目、创业公司MVP还是企业级应用，尤其是那些追求界面设计一致性、开发速度，并且欣赏 Shadcn UI 简洁美观设计风格的团队。它降低了实现专业级UI的门槛。
与同类Flutter UI库（如 Flutter Material 原生组件、或第三方库如 fluent_ui）相比，Flutter ShadcnUI 的核心区别在于其严格遵循并移植了 Web 端 React 生态中广受欢迎的 Shadcn UI 的设计哲学和视觉语言。它并非提供一套全新的设计系统，而是将一种在Web前端领域已被验证成功的、以可访问性和开发者体验著称的UI范式带入了Flutter世界，为熟悉或喜爱Shadcn UI的开发者提供了跨框架的一致性选择。
核心特点
核心区别在于它是 Shadcn UI 设计系统在 Flutter 生态的官方风格移植，而非原创设计系统，为追求跨技术栈（如从React转向Flutter）UI一致性的团队提供了无缝衔接的解决方案。其组件在高度可定制的同时，严格保持了原版 Shadcn UI 的视觉规范和交互细节。
注意事项
由于是移植项目，其组件覆盖进度可能滞后于原版React版本，且深度定制时可能需要开发者对Flutter和原设计理念均有理解。
常见问题
Flutter ShadcnUI 和 Material 组件有什么区别？
Material 组件遵循谷歌 Material Design 规范，而 Flutter ShadcnUI 移植了 Web 端 Shadcn UI 的设计风格，提供另一种现代、简洁的视觉语言和组件API。
这个库支持暗黑模式吗？
是的，作为现代UI组件库，它应该支持主题定制，包括亮色和暗黑模式，具体实现需参考其官方文档和主题配置部分。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/flutter-shadcn-ui/raw/index.md 读取 flutter-shadcn-ui 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/flutter-shadcn-ui/raw/index.md（查看排版版本）