flyonui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

FlyonUI

1. Overview

1. 概述

FlyonUI is a Tailwind CSS component library with two layers:

CSS Components (49 files) — Semantic class names like DaisyUI, providing pre-styled components
JS Plugins (24 plugins) — Optional interactive behavior for components that need JavaScript (accordion, dropdown, tabs, carousel, etc.)

All FlyonUI files are available through the

frontend-components

MCP server under the

flyonui

framework.

FlyonUI是一个Tailwind CSS组件库，包含两层内容：

CSS组件（49个文件）——采用与DaisyUI类似的语义化类名，提供预样式化的组件
JS插件（24个插件）——为需要JavaScript的组件提供可选的交互行为（如折叠面板、下拉菜单、标签页、轮播等）

所有FlyonUI文件都可通过

frontend-components

MCP服务器获取，隶属于

flyonui

框架。

2. Installation

2. 安装

bash

npm install flyonui

bash

npm install flyonui

Tailwind CSS v4

css

@import "tailwindcss";
@plugin "flyonui";

css

@import "tailwindcss";
@plugin "flyonui";

Tailwind CSS v3

// tailwind.config.js
module.exports = {
  plugins: [require("flyonui")],
}

// tailwind.config.js
module.exports = {
  plugins: [require("flyonui")],
}

JS Plugins (optional)

JS插件（可选）

html

<!-- Include FlyonUI JS for interactive components -->
<script src="./node_modules/flyonui/flyonui.js"></script>

Or import specific plugins:

import "flyonui/accordion";
import "flyonui/dropdown";
import "flyonui/tabs";

html

<!-- Include FlyonUI JS for interactive components -->
<script src="./node_modules/flyonui/flyonui.js"></script>

或者导入特定插件：

import "flyonui/accordion";
import "flyonui/dropdown";
import "flyonui/tabs";

3. MCP Workflow

3. MCP工作流

3.1 Browse Components

3.1 浏览组件

undefined

undefined

See all CSS components and JS plugins

查看所有CSS组件和JS插件

list_components(framework: "flyonui")

CSS components only

仅查看CSS组件

list_components(framework: "flyonui", category: "css")

JS plugins only

仅查看JS插件

list_components(framework: "flyonui", category: "plugins")

undefined

list_components(framework: "flyonui", category: "plugins")

undefined

3.2 Get Component CSS

3.2 获取组件CSS

undefined

undefined

Get CSS source for a component

获取组件的CSS源码

get_component(framework: "flyonui", category: "css", component_type: "all", variant: "button") get_component(framework: "flyonui", category: "css", component_type: "all", variant: "card") get_component(framework: "flyonui", category: "css", component_type: "all", variant: "modal")

undefined

undefined

3.3 Get JS Plugin Source

3.3 获取JS插件源码

undefined

undefined

Get plugin implementation

获取插件实现代码

get_component(framework: "flyonui", category: "plugins", component_type: "accordion", variant: "index") get_component(framework: "flyonui", category: "plugins", component_type: "dropdown", variant: "index")

Get plugin types

获取插件类型定义

get_component(framework: "flyonui", category: "plugins", component_type: "accordion", variant: "types")

Get plugin variant CSS

获取插件变体CSS

get_component(framework: "flyonui", category: "plugins", component_type: "dropdown", variant: "variants")

undefined

get_component(framework: "flyonui", category: "plugins", component_type: "dropdown", variant: "variants")

undefined

3.4 Search

3.4 搜索

search_components(query: "accordion", framework: "flyonui")
search_components(query: "select", framework: "flyonui")

search_components(query: "accordion", framework: "flyonui")
search_components(query: "select", framework: "flyonui")

4. CSS Components

4. CSS组件

4.1 Component Classes

4.1 组件类

FlyonUI follows the same naming convention as DaisyUI. Base class + modifiers:

Component	Base Class	Color Example	Size Example
Button	`btn`	`btn-primary`	`btn-sm`
Card	`card`	—	—
Badge	`badge`	`badge-primary`	`badge-sm`
Alert	`alert`	`alert-info`	—
Input	`input`	—	`input-sm`
Select	`select`	—	`select-sm`
Checkbox	`checkbox`	`checkbox-primary`	`checkbox-sm`
Radio	`radio`	`radio-primary`	`radio-sm`
Toggle	`switches`	`switch-primary`	`switch-sm`
Table	`table`	—	—
Tab	`tab`	—	—
Menu	`menu`	—	—
Modal	`modal`	—	—
Navbar	`navbar`	—	—
Drawer	`drawer`	—	—
Dropdown	`dropdown`	—	—
Tooltip	`tooltip`	—	—
Progress	`progress`	`progress-primary`	—
Loading	`loading`	—	—
Divider	`divider`	—	—
Breadcrumbs	`breadcrumbs`	—	—
Pagination	—	—	—
Avatar	`avatar`	—	—
Indicator	`indicator`	—	—
Mask	`mask`	—	—
Stack	`stack`	—	—
Stat	`stat`	—	—
Skeleton	`skeleton`	—	—
Timeline	`timeline`	—	—
Kbd	`kbd`	—	—
Link	`link`	`link-primary`	—
Label	`label`	—	—
Collapse	`collapse`	—	—
Carousel	`carousel`	—	—
Diff	`diff`	—	—
Filter	`filter`	—	—
Footer	`footer`	—	—

FlyonUI遵循与DaisyUI相同的命名规范：基础类 + 修饰符：

组件	基础类	颜色示例	尺寸示例
按钮	`btn`	`btn-primary`	`btn-sm`
卡片	`card`	—	—
徽章	`badge`	`badge-primary`	`badge-sm`
提示框	`alert`	`alert-info`	—
输入框	`input`	—	`input-sm`
选择器	`select`	—	`select-sm`
复选框	`checkbox`	`checkbox-primary`	`checkbox-sm`
单选框	`radio`	`radio-primary`	`radio-sm`
切换开关	`switches`	`switch-primary`	`switch-sm`
表格	`table`	—	—
标签页	`tab`	—	—
菜单	`menu`	—	—
模态框	`modal`	—	—
导航栏	`navbar`	—	—
抽屉	`drawer`	—	—
下拉菜单	`dropdown`	—	—
提示框	`tooltip`	—	—
进度条	`progress`	`progress-primary`	—
加载动画	`loading`	—	—
分割线	`divider`	—	—
面包屑	`breadcrumbs`	—	—
分页	—	—	—
头像	`avatar`	—	—
指示器	`indicator`	—	—
遮罩	`mask`	—	—
堆叠布局	`stack`	—	—
统计卡片	`stat`	—	—
骨架屏	`skeleton`	—	—
时间线	`timeline`	—	—
键盘按键	`kbd`	—	—
链接	`link`	`link-primary`	—
标签	`label`	—	—
折叠框	`collapse`	—	—
轮播	`carousel`	—	—
差异对比	`diff`	—	—
过滤器	`filter`	—	—
页脚	`footer`	—	—

4.2 Color System

4.2 颜色系统

FlyonUI uses semantic colors matching Tailwind CSS theme:

Color	Usage
`primary`	Primary brand actions
`secondary`	Secondary actions
`accent`	Highlights and accents
`neutral`	Default/neutral elements
`info`	Informational states
`success`	Success states
`warning`	Warning states
`error`	Error/danger states

FlyonUI使用与Tailwind CSS主题匹配的语义化颜色：

颜色	用途
`primary`	品牌主色调操作元素
`secondary`	次要操作元素
`accent`	高亮和强调元素
`neutral`	默认/中性元素
`info`	信息提示状态
`success`	成功状态
`warning`	警告状态
`error`	错误/危险状态

4.3 Size System

4.3 尺寸系统

Size	Modifier
Extra small	`-xs`
Small	`-sm`
Medium (default)	`-md`
Large	`-lg`
Extra large	`-xl`

尺寸	修饰符
特小	`-xs`
小	`-sm`
中等（默认）	`-md`
大	`-lg`
特大	`-xl`

5. JS Plugins

5. JS插件

5.1 Available Plugins

5.1 可用插件

Plugin	Purpose
`accordion`	Expandable/collapsible sections
`carousel`	Image/content slider
`collapse`	Single collapsible element
`combobox`	Searchable select with filtering
`copy-markup`	Copy to clipboard functionality
`datatable`	Interactive data tables
`dropdown`	Dropdown menus
`file-upload`	File upload with drag-and-drop
`input-number`	Number input with increment/decrement
`overlay`	Modal/overlay management
`pin-input`	PIN/OTP input fields
`range-slider`	Range slider with labels
`remove-element`	Remove/dismiss elements
`scrollspy`	Scroll-based navigation highlighting
`select`	Enhanced select dropdowns
`stepper`	Multi-step wizard
`strong-password`	Password strength indicator
`tabs`	Tab navigation
`toggle-count`	Counter toggle
`toggle-password`	Show/hide password
`tooltip`	Interactive tooltips
`tree-view`	Hierarchical tree navigation

插件	用途
`accordion`	可展开/折叠的区块
`carousel`	图片/内容轮播器
`collapse`	单个可折叠元素
`combobox`	带过滤功能的可搜索选择器
`copy-markup`	复制到剪贴板功能
`datatable`	交互式数据表格
`dropdown`	下拉菜单
`file-upload`	支持拖拽的文件上传
`input-number`	带增减按钮的数字输入框
`overlay`	模态框/遮罩层管理
`pin-input`	PIN/OTP输入框
`range-slider`	带标签的范围滑块
`remove-element`	移除/关闭元素
`scrollspy`	基于滚动的导航高亮
`select`	增强型下拉选择器
`stepper`	多步骤向导
`strong-password`	密码强度指示器
`tabs`	标签页导航
`toggle-count`	计数器切换
`toggle-password`	显示/隐藏密码
`tooltip`	交互式提示框
`tree-view`	层级树形导航

5.2 Plugin Initialization

5.2 插件初始化

Plugins auto-initialize when the JS is loaded. They use data attributes for configuration:

html

<!-- Accordion -->
<div class="accordion" id="my-accordion">
  <div class="accordion-item active">
    <button class="accordion-toggle">Section 1</button>
    <div class="accordion-content">
      <p>Content 1</p>
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-toggle">Section 2</button>
    <div class="accordion-content">
      <p>Content 2</p>
    </div>
  </div>
</div>

html

<!-- Tabs -->
<div class="tabs" data-tabs>
  <button class="tab tab-active" data-tab="#tab1">Tab 1</button>
  <button class="tab" data-tab="#tab2">Tab 2</button>
</div>
<div id="tab1">Content 1</div>
<div id="tab2" class="hidden">Content 2</div>

html

<!-- Dropdown -->
<div class="dropdown" data-dropdown>
  <button class="btn dropdown-toggle">Dropdown</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item">Item 1</a></li>
    <li><a class="dropdown-item">Item 2</a></li>
  </ul>
</div>

加载JS文件后，插件会自动初始化。它们使用数据属性进行配置：

html

<!-- Accordion -->
<div class="accordion" id="my-accordion">
  <div class="accordion-item active">
    <button class="accordion-toggle">Section 1</button>
    <div class="accordion-content">
      <p>Content 1</p>
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-toggle">Section 2</button>
    <div class="accordion-content">
      <p>Content 2</p>
    </div>
  </div>
</div>

html

<!-- Tabs -->
<div class="tabs" data-tabs>
  <button class="tab tab-active" data-tab="#tab1">Tab 1</button>
  <button class="tab" data-tab="#tab2">Tab 2</button>
</div>
<div id="tab1">Content 1</div>
<div id="tab2" class="hidden">Content 2</div>

html

<!-- Dropdown -->
<div class="dropdown" data-dropdown>
  <button class="btn dropdown-toggle">Dropdown</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item">Item 1</a></li>
    <li><a class="dropdown-item">Item 2</a></li>
  </ul>
</div>

5.3 Plugin Architecture

5.3 插件架构

Each plugin follows this structure:

```
index.ts
```
— Main plugin logic and class definition
```
types.ts
```
— TypeScript type definitions
```
interfaces.ts
```
— Interface definitions
```
variants.css
```
— Optional CSS variants for the plugin

Fetch plugin source to understand initialization options, events, and API methods:

get_component(framework: "flyonui", category: "plugins", component_type: "accordion", variant: "index")

每个插件遵循以下结构：

```
index.ts
```
— 主插件逻辑和类定义
```
types.ts
```
— TypeScript类型定义
```
interfaces.ts
```
— 接口定义
```
variants.css
```
— 插件的可选CSS变体

获取插件源码以了解初始化选项、事件和API方法：

get_component(framework: "flyonui", category: "plugins", component_type: "accordion", variant: "index")

6. Theming

6. 主题配置

6.1 Built-in Themes

6.1 内置主题

FlyonUI supports themes through

data-theme

html

<html data-theme="light">
<html data-theme="dark">

FlyonUI通过

data-theme

属性支持主题切换：

html

<html data-theme="light">
<html data-theme="dark">

6.2 Custom Themes

6.2 自定义主题

Similar to DaisyUI, override CSS custom properties:

css

[data-theme="custom"] {
  --color-primary: oklch(65% 0.25 260);
  --color-secondary: oklch(70% 0.2 180);
  /* ... other color variables */
}

与DaisyUI类似，可通过覆盖CSS自定义属性来实现：

css

[data-theme="custom"] {
  --color-primary: oklch(65% 0.25 260);
  --color-secondary: oklch(70% 0.2 180);
  /* ... 其他颜色变量 */
}

6.3 Dark Mode

6.3 深色模式

FlyonUI supports both

data-theme

switching and Tailwind's

dark:

class strategy.

FlyonUI同时支持

data-theme

切换和Tailwind的

dark:

类策略。

7. FlyonUI vs DaisyUI

Feature	FlyonUI	DaisyUI
CSS Components	49	65+
JS Plugins	24 interactive plugins	None (CSS only)
Class naming	Same convention	Base convention
Theming	data-theme + CSS vars	data-theme + CSS vars
Interactive components	Built-in JS plugins	Requires external JS
File upload	Built-in plugin	Not included
Data tables	Built-in plugin	Not included
Tree view	Built-in plugin	Not included
Combobox	Built-in plugin	Not included

特性	FlyonUI	DaisyUI
CSS组件数量	49	65+
JS插件	24个交互式插件	无（仅支持CSS）
类命名规范	相同规范	基础规范
主题配置	data-theme + CSS变量	data-theme + CSS变量
交互式组件	内置JS插件	需要外部JS支持
文件上传	内置插件	不包含
数据表格	内置插件	不包含
树形视图	内置插件	不包含
组合框	内置插件	不包含

7.1 When to Use FlyonUI Over DaisyUI

7.1 何时选择FlyonUI而非DaisyUI

You need interactive components (datatables, combobox, tree-view, file-upload)
You want a JS plugin system alongside CSS components
You need stepper/wizard functionality
You need copy-to-clipboard, password strength, or pin input

你需要交互式组件（如数据表格、组合框、树形视图、文件上传）
你希望在CSS组件之外拥有JS插件系统
你需要步骤向导功能
你需要复制到剪贴板、密码强度检测或PIN输入功能

7.2 When to Use DaisyUI Over FlyonUI

7.2 何时选择DaisyUI而非FlyonUI

You need CSS-only components with no JavaScript
You want the largest component catalog (65+ vs 49)
You need more built-in themes (30+)
You're already using a JS framework (React, Vue) for interactivity

你只需要纯CSS组件，不需要JavaScript
你需要更丰富的组件库（65+ vs 49）
你需要更多内置主题（30+）
你已经在使用JS框架（React、Vue）来实现交互

8. Common Patterns

8. 常见模式

8.1 Card with Actions

8.1 带操作按钮的卡片

html

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p>Card content goes here.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
</div>

html

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p>Card content goes here.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
</div>

8.2 Form Group

8.2 表单组

html

<div class="form-control">
  <label class="label">
    <span class="label-text">Email</span>
  </label>
  <input type="email" class="input" placeholder="email@example.com" />
</div>

html

<div class="form-control">
  <label class="label">
    <span class="label-text">Email</span>
  </label>
  <input type="email" class="input" placeholder="email@example.com" />
</div>

8.3 Modal with Overlay Plugin

8.3 使用Overlay插件的模态框

html

<button class="btn" data-overlay="#my-modal">Open Modal</button>
<div id="my-modal" class="modal overlay hidden">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Modal Title</h3>
    <p>Modal content</p>
    <div class="modal-action">
      <button class="btn" data-overlay-close="#my-modal">Close</button>
    </div>
  </div>
</div>

html

<button class="btn" data-overlay="#my-modal">Open Modal</button>
<div id="my-modal" class="modal overlay hidden">
  <div class="modal-box">
    <h3 class="text-lg font-bold">Modal Title</h3>
    <p>Modal content</p>
    <div class="modal-action">
      <button class="btn" data-overlay-close="#my-modal">Close</button>
    </div>
  </div>
</div>

9. Workflow Summary

9. 工作流总结

Step	Action
1. Identify component	What UI element is needed?
2. Check CSS component	`get_component(framework: "flyonui", category: "css", ...)`
3. Check JS plugin	Does it need interactivity? Check `list_components(category: "plugins")`
4. Get plugin source	`get_component(framework: "flyonui", category: "plugins", ...)`
5. Apply classes	Use base class + modifiers
6. Add data attributes	For JS plugin initialization
7. Theme	Set `data-theme` or define custom CSS variables

步骤	操作
1. 确定组件	你需要什么UI元素？
2. 查看CSS组件	使用 `get_component(framework: "flyonui", category: "css", ...)`
3. 查看JS插件	是否需要交互？查看 `list_components(category: "plugins")`
4. 获取插件源码	使用 `get_component(framework: "flyonui", category: "plugins", ...)`
5. 应用类名	使用基础类 + 修饰符
6. 添加数据属性	用于JS插件初始化
7. 主题配置	设置 `data-theme` 或定义自定义CSS变量