Skip to content

๐Ÿš€ The easiest, free and open-source Tailwind CSS component library with semantic classes.

License

Notifications You must be signed in to change notification settings

themeselection/flyonui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

28 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

flyonui logo

FlyonUI is the easiest, free and open-source Tailwind CSS component library with semantic classes. ๐Ÿš€

Total Downloads on NPM Latest Version MIT License Twitter Follow

themeselection logo

Created by ThemeSelection, with a commitment to empowering the open-source community.


Table of Contents ๐Ÿ“‹


Overview ๐ŸŒ

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 Tailwind CSS Components Library 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 โœจ

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

Documentation ๐Ÿ“š

For comprehensive documentation, please visit flyonui.com.

Framework guides ๐Ÿ› ๏ธ

HTML React Nextjs Vue Nuxtjs
Html logo React logo Nextjs logo Vue logo Nuxtjs logo
Angular Svelte Remix Astro Qwik
Angular logo Svelte logo Remix logo Astro logo Qwik logo
Django Flask Laravel
Django logo Flask logo Laravel logo

Getting Started ๐Ÿ

FlyonUI can be easily integrated into any existing Tailwind CSS project.

Installation via NPM

To use FlyonUI, ensure that you have Node.js and Tailwind CSS installed.

  1. Install FlyonUI as a dependency:

    npm install flyonui
  2. Include FlyonUI as a plugin in your tailwind.config.js file:

    module.exports = {
      content: ["./node_modules/flyonui/dist/js/*.js"], // Require only if you want to use FlyonUI JS component
    
      plugins: [
        require("flyonui"),
        require("flyonui/plugin") // Require only if you want to use FlyonUI JS component
      ]
    }

    This ensures that FlyonUI's styling is applied correctly throughout your project.

    If you want to include specific js component:

    module.exports = {
      content: ["./node_modules/flyonui/dist/js/accordion.js"]
    }
  3. Include FlyonUI JavaScript in HTML To enable interactive elements, include FlyonUI's JavaScript in your HTML file, right before the closing </body> tag:

    <script src="../node_modules/flyonui/flyonui.js"></script>

    For a single component, use the specific path:

    <script src="../node_modules/flyonui/dist/js/accordion.js"></script>

    This script ensures that all FlyonUI interactivity is correctly applied to your elements.

RTL (Right-to-Left) Language Support

FlyonUI components offer native RTL support. Simply add the dir="rtl" attribute to your HTML element to enable this feature.

Available Components ๐Ÿงฉ

FlyonUI provides a robust library of UI components built with Tailwind CSS utility classes, enabling fast and efficient web development. Our library includes 78+ components, from basic elements like buttons and cards to more complex third-party integrations.

Explore all components

Component Examples

Accordion Alert Apex Charts
Tailwind CSS Accordion Tailwind CSS Alert Tailwind CSS Apex Charts
Button Card Checkbox
Tailwind CSS Button Tailwind CSS Card Tailwind CSS Checkbox
Dropdown Input Modal
Tailwind CSS Dropdown Tailwind CSS Input Tailwind CSS Modal
Navbar Tabs & Pills Tooltip
Tailwind CSS Navbar Tailwind CSS Tabs & Pills Tailwind CSS Tooltip

Explore all components

Community ๐Ÿค

Join the FlyonUI community to discuss the library, ask questions, and share your experiences:

Contributing ๐Ÿ“

Fix a bug, or add a new feature. You can make a pull request and see your code in the next version of FlyonUI.

Before adding a pull request, please see the contributing guidelines.

Credits ๐Ÿค˜

We are grateful for the contributions of the open-source community, particularly:

These projects form the backbone of FlyonUI, allowing us to build a powerful and user-friendly UI kit.

License ยฉ

  • Copyright ยฉ ThemeSelection
  • Licensed under MIT
  • FlyonUI is open-source software licensed under the MIT License.You can use our free items for personal as well as commercial purposes.

Useful Links ๐ŸŽ