flyonui
SKILL.md
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 flyonui
Tailwind 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 |
Weekly Installs
9
Repository
peixotorms/odin…r-skillsGitHub Stars
3
First Seen
Feb 9, 2026
Security Audits
Installed on
github-copilot9
codex9
kimi-cli9
gemini-cli9
amp9
opencode9