DEV Community: John Kat

Introducing Flexiwind (Beta): a composable UI system for Laravel & Livewire

John Kat — Thu, 05 Feb 2026 11:24:37 +0000

Today, I’m excited to share the beta release of Flexiwind — a composable UI system built for Laravel Blade and Livewire.

If you like the philosophy behind shadcn/ui but live in the Laravel ecosystem, Flexiwind might feel very familiar — yet intentionally different.

What is Flexiwind?

Flexiwind is not a traditional component library.

You don’t install it and import components from vendor/.

Instead, Flexiwind gives you production-ready UI components and blocks that you copy directly into your project, so you fully own the code.

❌ No black box.

❌ No vendor lock-in.

❌ No magic.

Why Flexiwind?

Most Laravel UI kits fall into one of these traps:

Hard to customize
Too opinionated
Abstracted behind APIs you eventually fight
Disconnected from how Livewire actually works

Flexiwind takes a different path:

You copy the code. You adapt it. You ship.

The goal is not to hide complexity — it’s to give you a clean, extensible starting point.

How it works

The workflow is intentionally simple:

Pick the components or blocks you need
Add them to your project (manually or via CLI)
Customize them like any other Blade or Livewire code

Everything is built with:

Laravel Blade
Livewire
Tailwind CSS

Key ideas behind Flexiwind

🎨 Full ownership & easy customization

Because components live directly in your codebase, customization is natural.

Instead of fighting with !important or overriding utility classes like:

!bg-red-400 !px-6 !rounded-xl

Flexiwind relies heavily on CSS variables for theming and variants.

That means:

cleaner markup
predictable customization
easier brand alignment

🧠 Semantic utilities (without losing flexibility)

Flexiwind introduces semantic utility classes on top of Tailwind.
Instead of long class chains, you can write:

<button class="btn btn-md btn-solid btn-solid-primary">

This approach:

separates structure from variants
keeps templates readable
still allows Tailwind-level control when needed

⚡ Interactive, but not heavyweight

For interactivity, Flexiwind relies on its own small ecosystem:

Flexilla (Vanilla JS)
Alpine Flexilla (Alpine.js)

These are headless UI primitives (dropdowns, modals, popovers, PIN inputs, etc.) designed to be:

Modular – install only what you use
Extensible – powerful APIs, no rigid behavior
Open source – inspect, fork, or own the code

No unnecessary JavaScript frameworks.
No hidden coupling.

💻 CLI-first experience

Flexiwind ships with a CLI to make adoption frictionless.

Instead of copy-pasting files manually, you can add components and blocks directly from the registry:

flexi add button
flexi add auth/login

The CLI copies the code into your project, so you can modify it freely.

What’s included in the beta?

The current beta includes:

Core UI components (buttons, modals, dropdowns, alerts, etc.)
A registry-based system
CLI tooling
Base application blocks:
- Login (multiple variants)
- Signup
- Sidebar
documentation

This is the foundation, not the final shape.

What’s next?

Flexiwind is just getting started.

The next steps are focused on real-world Laravel needs:

Polishing and hardening existing components
Improving documentation and examples
Adding application-level blocks:
- authentication flows
- dashboards
- CRUD patterns
- settings pages

The long-term goal is simple:

Help Laravel & Livewire developers build real products faster — not just UIs.

Beta means feedback matters

Flexiwind is in beta, and your feedback will directly shape what comes next.

If you:

build with Laravel & Livewire
enjoy owning your UI code
care about long-term maintainability

I’d love for you to try it, break it, and share your thoughts.

More updates coming soon.

Github : Flexiwind
Live : Website

Building Flexilla : Headless Interactive Component Library

John Kat — Tue, 18 Mar 2025 10:06:46 +0000

The journey of creating my very first JavaScript library has been transformative, helping me grow. How did I get here? Let's start from the beginning.

After completing the beta versions of UnifyUI Blocks and Flexiwind Blocks, my friend and I faced a challenge: adding interactive components like dropdowns, collapses, and tabs.

Since UnifyUI and Flexiwind are different : one works with UnoCSS and the other with TailwindCSS, we initially wrote separate scripts for each. But it soon became apparent that this was a less-than-ideal solution.

After studying how Preline handles interactions with dedicated JavaScript plugins tailored for TailwindCSS, we saw the need for a CSS framework-agnostic solution.

Why CSS Framework-Agnostic?

Creating a CSS framework-agnostic library was essential for us because we wanted Flexilla to work seamlessly with any CSS framework or even with Pure CSS. Many developers, including those using UnoCSS, TailwindCSS, or even Bootstrap, should have the flexibility to enhance their components without limitations.

By making Flexilla independent of a specific framework, we can provide a versatile tool that works for many different types of projects. It also aligns with the work we've already done on UnifyUI and Flexiwind Blocks, where flexibility is key.

Solution

Inspired by the Preline and Flowbite plugin, we decided to create Flexilla which is fully open-source .

Flexilla is a standalone library designed to manage interactions independently, without relying on any specific CSS framework. It offers the flexibility to integrate smoothly with TailwindCSS, UnoCSS, or any other CSS technology.

Our aim was to enhance components in a way that wasn’t restricted to a particular CSS environment.

Challenges

At first, I had no idea where to start. Should I clone Preline and adapt it? No, that wouldn’t have helped me, as my goal was to learn through this project.

Code Organization

In the beginning, my code was a mess: unreadable and hard to follow.

I had a "packages" folder, and it was a disaster! This made it difficult to publish certain packages separately, so I needed a solution.

Solution

I found an article about Lerna, which immediately caught my interest. After a few days of reading documentation and restructuring my code, I had an organization I was proud of. Lerna allowed me to streamline my updates, manage multiple packages in a mono repository, and publish them independently.

PopperJS?

Yes, I faced this dilemma: should I use PopperJS or not?

It was a big challenge, but I’ll save that story for a future article.

Versioning

This was a major stumbling block. I initially published the library and all its packages with version 1.0.0… and after publishing, I realized there were issues in some packages. So for every fix, I would publish a new version of the library and its packages. Bad idea! Eventually, a friend suggested I read an article about SEMVER, and suddenly, versioning made sense—though I was a bit late to the game.

That’s how I ended up with the library at version 2.x.x. From that point, I stopped making those mistakes. With Lerna, I no longer have to worry about changing package versions that haven’t been updated; Lerna takes care of that for me.

Features

1. CSS Framework Agnosticism

Flexilla doesn’t rely on any specific CSS framework, making it compatible with TailwindCSS, UnoCSS, or even plain CSS. This flexibility ensures that you can integrate it with your project regardless of the CSS framework you’re using.

2. Modular Components

Flexilla offers modular components like dropdowns, tabs, and collapses. These components are built to be lightweight and easy to include as needed, so you only add what you’re going to use, which helps with performance and bundle size.

3. Simple API

The library features an easy-to-use API that requires minimal configuration. Here’s a simple example of how to set up a dropdown component:

   import { Dropdown } from '@flexilla/flexilla';
   Dropdown.init("#myDropdown");

This example shows how you can quickly initialize a dropdown with just a few lines of code, making it highly accessible for developers of all levels.

4. Headless Architecture

Inspired by headless UI libraries, Flexilla allows you to control the styles completely, so you’re not limited by predefined designs or themes. This makes it easy to integrate into custom-styled projects and ensures it won’t conflict with existing styles.

5. Customizable Events

Flexilla components come with customizable events. For example, you can add actions to respond to user actions or customize behaviors for specific interactions, like on dropdown open or tab change.

const myDropdown = new Dropdown('#myDropdown', {
  onShow: () => console.log('Dropdown is shown!'),
  onHide: () => console.log('Dropdown is hidden!'),
});

const myAccordionEl = document.querySelector("#myAccordion")
const myAccordion = Accordion.init(myAccordionEl)
myAccordionEl.addEventListener("change-item",()=>{
   console.log("Accordion item changed")
})

When and Where to Use the Library?

Use Flexilla when you're working on a project where you don't want to use a JavaScript framework but need interactive components with accessibility in mind. (Recommended: AstroJS, PHP and PHP frameworks, Static Websites)
It can work well with VueJS, but it's not recommended. With ReactJS, don't even try!

What’s Next for Flexilla?

Flexilla will continue to evolve. We plan to add more components, improve the existing ones, and refine the documentation. In addition to existing components, We plan to introduce other common components like notifications and toasts. This will allow Flexilla to support a wider range of interactive needs.

Conclusion

According to our needs, Flexilla has proven to be a valuable tool for creating interactive components in my projects.
Starting out can be scary. I was afraid no one would appreciate my work, afraid it wouldn't serve any purpose. But I assure you, not trying is the biggest mistake. Today, I have no regrets about creating this library. It has allowed me to learn so much : code organization, versioning, managing npm packages… Don’t hesitate to share your solution with the world and be open to feedback, whether positive or negative. It will help you grow!

If you have ideas, suggestions, or code improvements, don’t hesitate to fork the repository, submit a pull request, or open an issue. Together, we can enhance the library and create a valuable resource for developers everywhere.

On that note, take care, and don’t forget to check out Flexilla and let me know what you think!

French Version : coming soon