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

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:

1. Pick the components or blocks you need

2. Add them to your project (manually or via CLI)

3. 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