• getting-started
  • Introduction

getting-started

Introduction

The easiest, free and open-source Tailwind CSS component library with semantic classes. 🚀

What is FlyonUI?

FlyonUI is designed to combine the best of both worlds: the aesthetic appeal of semantic classes and the powerful functionality of JS plugins.

Under the hood, it uses the strengths of:

  • Tailwind CSS: A utility-first CSS framework that helps you build beautiful websites with ease.
  • daisyUI adds component semantic class names to Tailwind CSS so you can make beautiful websites faster, easier and Maintainable.
  • Preline JavaScript headless & fully unstyled Tailwind plugins for accessible, responsive UI. Enhance experiences with animations, transitions, and more.

Why should I use FlyonUI?

Using Tailwind CSS alone may lead to cluttered HTML with numerous utility classes, which can be a nightmare to maintain.

Apart from that Tailwind CSS or daisyUI doesn’t provide any interactive headless JavaScript components like accordion, overlay, dropdowns, etc…

This is where FlyonUI shines.✨

FlyonUI brings together the beauty of semantic classes and the interactive headless JavaScript plugins, offering you a powerful toolkit to build stunning, interactive user interfaces with ease.

  • Beautiful and Semantic Styling: Utilize comprehensive CSS components with semantic class names for a clean and readable codebase.
  • Interactive and Dynamic Features: Incorporate Headless JavaScript plugins for ex: Accordion , Dropdown , Overlay etc… to add interactivity and dynamic behavior to your UI components.
  • Efficiency and Productivity: Enjoy a faster and more efficient development process by combining the strengths of semantic classes and JS plugins.
  • Maintainable and Scalable: Keep your projects maintainable and scalable with a consistent coding approach and powerful JS plugins.

Features

  • 800+ Free Components & Examples: Hundreds of component examples for all your WebApp needs that meet accessibility criteria.
  • Universal Framework Compatibility: Fully compatible wherever Tailwind CSS is in action, from React to Vue and beyond.
  • Unstyled & Accessible Plugins: Seamlessly add unstyled, accessible plugins for functionality without sacrificing design.
  • Unlimited Themes: Customize your app’s look and feel with FlyonUI’s theming capabilities. Refer to the theme section for more details.
  • Responsive & RTL support : Built with responsiveness in mind, ensuring your app looks great on all devices with RTL language support.
  • Free Forever: Completely free forever, open-source, and built for the community.

FAQs

Here are some key points addressing the need for another component library on top of daisyUI, like FlyonUI:

  • Additional JavaScript Support:
    • daisyUI is the most popular component library for Tailwind CSS, offering a wide range of components with semantic class names. But many projects require interactive features that need JavaScript.
    • FlyonUI builds on top of daisyUI by integrating Preline’s JS plugins, offering headless, fully unstyled components that are accessible and responsive.
  • Headless Architecture:
    • FlyonUI’s headless architecture allows developers to focus on functionality, providing greater flexibility when integrating components into any UI framework or design system.
  • Broader Component Set:
    • FlyonUI extends the component offering, with both UI elements and functional components that handle interactive behaviors like accordion, overlay, dropdowns, and carousels, etc.
  • Third-Party Component Support:
    • FlyonUI provides built-in support for popular third-party libraries like ApexCharts, FullCalendar, Flatpickr, and Toast, etc. This allows developers to extend their UIs with advanced features.