Introduction
Flexilla is a headless, CSS framework-agnostic library designed to manage interactive components like dropdowns, collapses, and tabs.
It provides seamless integration with any CSS framework, including TailwindCSS and UnoCSS.
To delve deeper into the motivation behind Flexilla, check out this article.
Principles
Flexilla doesn’t use any CSS Framework, it’s just update states via data attributes, you can directly specify style on the component according to it’s state (for an accordion: each item has a data-open attribute wich can be close or open, and eache item has trigger
aria-expended="true" or aria-expended="false" and content data-state="open" or data-state="close") FAQ
Are components accessible?
Yes, all components are designed with accessibility in mind.
Can I use this in production?
Absolutely! Flexilla is production-ready and is currently deployed on this website.
When can I use it?
You can use Flexilla in projects where you prefer not to rely on a JS framework while still needing interactive components with accessibility considerations. Recommended environments include AstroJS, PHP and its frameworks, Flask, Django, Ruby on Rails, and static websites.
Can I use it with ReactJS?
While it’s possible to integrate Flexilla with ReactJS, we recommend using React Aria Components for better compatibility.
Can I use it with VueJS?
Yes, Flexilla is compatible with VueJS, but we suggest using Radix-Vue for a more tailored experience.
Can I use it with Bootstrap?
Certainly! However, some customization of CSS classes and HTML structure will be necessary.