用途:FlyonUI 是面向 Tailwind CSS 的组件库,提供预置样式的语义化 CSS 组件类,以及可选的 JavaScript 交互插件,用于快速搭建界面。
主要能力:CSS 组件共 49 个文件,采用与 DaisyUI 相同的命名约定(基础类加修饰符),覆盖按钮、卡片、徽章、提示、输入、选择、复选框、单选、开关、表格、标签页、菜单、模态、导航栏、抽屉、下拉、工具提示、进度、加载、分隔线、面包屑、头像、指示器、遮罩、堆叠、统计、骨架、时间线、Kbd、链接、标签、折叠、轮播、Diff、筛选、页脚等。颜色系统含 primary、secondary、accent、neutral、info、success、warning、error;尺寸修饰符为 -xs、-sm、-md、-lg、-xl。JS 插件共 24 个,包括 accordion、carousel、collapse、combobox、copy-markup、datatable、dropdown、file-upload、input-number、overlay、pin-input、range-slider、remove-element、scrollspy、select、stepper、strong-password、tabs、toggle-count、toggle-password、tooltip、tree-view 等。
使用方式:安装命令为 npm install flyonui。Tailwind CSS v4 使用 @import "tailwindcss"; 与 @plugin "flyonui";;v3 在 tailwind.config.js 的 plugins 中加入 require("flyonui")。JS 插件可选,可引入 ./node_modules/flyonui/flyonui.js,或按需 import "flyonui/accordion" 等。插件在 JS 加载后自动初始化,通过 data 属性配置。主题通过 data-theme 切换(如 light、dark),也可用 CSS 自定义属性覆盖定义自定义主题,并支持 Tailwind 的 dark: 策略。资料还提供了通过 MCP 服务器浏览组件、获取 CSS 与插件源码、搜索组件的命令示例。
适用场景:需要交互组件(数据表、组合框、树视图、文件上传)、需要步进器/向导、复制到剪贴板、密码强度或 PIN 输入时,可考虑选用。
限制:资料未提供收费、价格、平台支持范围与效果数据;组件数量、主题数量等以资料所列为准。