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.
Top comments (0)