FlyonUI
1. Overview
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.
2. Installation
npm install flyonuiTailwind CSS v4
@import "tailwindcss";
@plugin "flyonui";Tailwind CSS v3
// tailwind.config.js
module.exports = {
plugins: [require("flyonui")],
}JS Plugins (optional)
<!-- 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";3. MCP Workflow
3.1 Browse Components
# See all CSS components and JS plugins
list_components(framework: "flyonui")
# CSS components only
list_components(framework: "flyonui", category: "css")
# JS plugins only
list_components(framework: "flyonui", category: "plugins")3.2 Get Component CSS
# Get CSS source for a component
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")3.3 Get JS Plugin Source
# 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
get_component(framework: "flyonui", category: "plugins", component_type: "dropdown", variant: "variants")3.4 Search
search_components(query: "accordion", framework: "flyonui")
search_components(query: "select", framework: "flyonui")4. CSS Components
4.1 Component Classes
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 | — | — |
4.2 Color System
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 |
4.3 Size System
| Size | Modifier |
|---|---|
| Extra small | -xs |
| Small | -sm |
| Medium (default) | -md |
| Large | -lg |
| Extra large | -xl |
5. JS Plugins
5.1 Available Plugins
| 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 |
5.2 Plugin Initialization
Plugins auto-initialize when the JS is loaded. They use data attributes for configuration:
<!-- 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><!-- 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><!-- 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
Each plugin follows this structure:
index.ts— Main plugin logic and class definitiontypes.ts— TypeScript type definitionsinterfaces.ts— Interface definitionsvariants.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")6. Theming
6.1 Built-in Themes
FlyonUI supports themes through data-theme:
<html data-theme="light">
<html data-theme="dark">6.2 Custom Themes
Similar to DaisyUI, override CSS custom properties:
[data-theme="custom"] {
--color-primary: oklch(65% 0.25 260);
--color-secondary: oklch(70% 0.2 180);
/* ... other color variables */
}6.3 Dark Mode
FlyonUI supports both data-theme switching and Tailwind's dark: class strategy.
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 |
7.1 When to Use FlyonUI Over 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
7.2 When to Use DaisyUI Over 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
8. Common Patterns
8.1 Card with Actions
<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
<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
<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
| 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 |