FlyonUI - 开源 Tailwind CSS 组件库现已上线 🚀

嘿，开发者们！👋

我们非常高兴地宣布推出 FlyonUI——一个我们一直在努力开发的完全免费且开源的Tailwind CSS 组件库。

该库将 Tailwind CSS 的优点与语义类名以及强大的无头 JS 插件结合在一起，以实现无缝的开发体验。

你猜怎么着？它在GitHub上可供社区使用、贡献和改进。

一点背景故事💪

我们的团队投入了大量的时间和热情来构建 FlyonUI，我们很高兴免费提供它！

我们诚挚邀请您试用，并通过GitHub Issues或评论区分享您的反馈。您的反馈将帮助我们更好地服务于 FlyonUI。

目录

• 目录
• 概述
• 我为什么要使用 FlyonUI？
• 特征
• 文档
• 入门
  • 通过 NPM 安装
  • RTL（从右到左）语言支持
• 可用组件
  • 组件示例
• 社区
• 致谢
• 执照

概述

FlyonUI 的设计旨在结合两全其美的优势：语义类的美学吸引力和 JS 插件的强大功能。

在底层，它利用了以下优势：

• Tailwind CSS一个实用优先的 CSS 框架，可帮助您轻松构建漂亮的网站。
• DaisyUI为 Tailwind CSS 添加了组件语义类名，以便您可以更快、更轻松、更易于维护地创建漂亮的网站。
• Preline JavaScript 无头且完全无样式的 Tailwind 插件，打造易于访问且响应迅速的 UI。通过动画、过渡等功能增强体验。

我为什么要使用 FlyonUI？

单独使用 Tailwind CSS 可能会导致 HTML 混乱，包含大量实用程序类，维护起来可能非常困难。

除此之外，Tailwind CSS 或 DaisyUI 不提供任何交互式无头 JavaScript 组件，如手风琴、覆盖、下拉菜单等……

这就是 FlyonUI 闪耀的地方。✨

FlyonUI 融合了语义类和交互式无头 JavaScript 插件的美感，为您提供了强大的工具包，可轻松构建令人惊叹的交互式用户界面。

• 美观且语义化的样式：利用具有语义类名的综合 CSS 组件来获得干净且可读的代码库。
• 交互式和动态功能：结合无头 JavaScript 插件（例如：Accordion、Dropdown、Overlay 等...）为您的 UI 组件添加交互性和动态行为。
• 效率和生产力：通过结合语义类和 JS 插件的优势，享受更快、更高效的开发过程。
• 可维护和可扩展：通过一致的编码方法和强大的 JS 插件使您的项目保持可维护和可扩展。

特征

1. 800 多个免费组件和示例：数百个符合可访问性标准的组件示例，满足您的所有 WebApp 需求。
2. 通用框架兼容性：从 React 到 Vue 及其他，无论 Tailwind CSS 在何处运行，都完全兼容。
3. 无限主题：使用 FlyonUI 的主题功能自定义应用的外观和风格。更多详情，请参阅主题部分。
4. 无样式且可访问的插件：无缝添加无样式、可访问的插件以实现功能，而不会牺牲设计。
5. 响应式和 RTL 支持：构建时考虑了响应性，确保您的应用在所有支持 RTL 语言的设备上看起来都很棒。
6. 永久免费：永久完全免费、开源、为社区打造。

文档

如需完整文档，请访问flyonui.com。

入门

FlyonUI 可以轻松集成到任何现有的 Tailwind CSS 项目中。

通过 NPM 安装

要使用 FlyonUI，请确保已安装Node.js和Tailwind CSS。

1. 安装 FlyonUI 作为依赖项：

   npm install flyonui

1. 将 FlyonUI 作为插件包含在您的tailwind.config.js文件中：

   module.exports = {
     content: ["./node_modules/flyonui/dist/js/*.js"], // Require only if you want to use FlyonUI JS component

     plugins: [
       require("flyonui"),
       require("flyonui/plugin") // Require only if you want to use FlyonUI JS component
     ]
   }

这可确保 FlyonUI 的样式在整个项目中正确应用。

如果你想包含特定的 js 组件：

   module.exports = {
     content: ["./node_modules/flyonui/dist/js/accordion.js"]
   }

1. 在 HTML 中包含 FlyonUI JavaScript 要启用交互元素，请在 HTML 文件的结束</body>标记之前包含 FlyonUI 的 JavaScript：

   <script src="../node_modules/flyonui/flyonui.js"></script>

对于单个组件，使用特定路径：

   <script src="../node_modules/flyonui/dist/js/accordion.js"></script>

该脚本确保所有 FlyonUI 交互都正确应用于您的元素。

RTL（从右到左）语言支持

FlyonUI 组件提供原生 RTL 支持。只需将dir="rtl"属性添加到 HTML 元素即可启用此功能。

可用组件

FlyonUI 提供了一个强大的 UI 组件库，该库基于 Tailwind CSS 实用类构建，可实现快速高效的 Web 开发。我们的组件库包含 78 多个组件，从按钮、卡片等基本元素到更复杂的第三方集成，应有尽有。

探索所有组件

组件示例

手风琴	警报	Apex 图表
按钮	卡片	复选框
下拉菜单	输入	莫代尔
导航栏	片剂和药丸	工具提示

探索所有组件

社区

加入 FlyonUI 社区讨论图书馆、提出问题并分享您的经验：

• 📢在 Twitter 上关注我们
• ⌨️在 GitHub 上讨论

致谢

我们感谢开源社区的贡献，特别是：

• TailwindCSS
• 雏菊用户界面
• Preline UI。

这些项目构成了 FalyonUI 的骨干，使我们能够构建强大且用户友好的 UI 套件。

执照

FlyonUI 是根据 MIT 许可证授权的开源软件。

• 📝阅读许可证
• 📀查看第三方许可证