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 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")

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