Flux UI en Laravel 13: la librería de componentes que por fin le da orden al frontend con Livewire
Llevo un tiempo mirando de cerca los starter kits de Laravel 13, y hay algo que se repite en casi todos los proyectos nuevos que arrancan con Livewire: aparece Flux UI. No es casualidad. Cuando empecé a revisar cómo está armado el kit oficial de Livewire para Laravel 13, noté que Flux ya no es un componente más de la lista de dependencias, sino la base visual completa sobre la que se construye la aplicación. Y eso, para quienes venimos peleando durante años con Blade «a mano» o con librerías de componentes pensadas para SPA, cambia bastante el punto de partida.
¿Qué es exactamente Flux UI?
Flux es la librería oficial de componentes para Livewire, construida por el mismo equipo detrás de Livewire y Alpine.js. La idea de fondo es simple: en vez de escribir un botón, un modal o una tabla desde cero cada vez, usás una sintaxis tipo HTML —algo como <flux:button> o <flux:modal>— y Flux se encarga del resto: estilos con Tailwind CSS, accesibilidad, modo oscuro y comportamiento responsive ya resueltos de fábrica.
Lo interesante es que no reemplaza a Livewire, lo complementa. Tú sigues escribiendo tu lógica en PHP como siempre, pero el «cascarón» visual —el que normalmente te toma más tiempo del que te gustaría admitir— ya viene armado, probado y pensado para funcionar bien tanto en desktop como en mobile.
Por qué aparece justo ahora en Laravel 13
Acá viene la parte que más me llamó la atención. El starter kit oficial de Livewire para Laravel 13 combina Livewire, Tailwind y Flux UI como stack por defecto, dejando toda la lógica de frontend y backend directamente dentro de tu aplicación para que puedas modificarla sin pelear contra una «caja negra». Es la misma filosofía que Laravel viene aplicando con sus otros starter kits (el de React usa Inertia 3 y shadcn/ui), pero para el mundo Livewire, Flux es la pieza que faltaba: antes tenías que salir a buscar librerías de terceros o armar tu propio sistema de diseño desde cero.
En paralelo, Flux llegó a su versión 2.0, y ahí el equipo tomó una decisión que se nota en el día a día: en lugar de integrar librerías externas de gráficos o selectores de fecha, construyeron esos componentes desde cero. El resultado son piezas más livianas —apenas unos kilobytes extra al bundle final— y, sobre todo, con menos piezas sueltas de las que depender quiero decir, menos riesgo de que una dependencia externa se rompa con una actualización.
Cómo se usa en la práctica
La instalación es la típica de Laravel: un
composer require livewire/flux
y dos directivas Blade (@fluxAppearance y @fluxScripts) en tu layout principal. A partir de ahí, empezás a escribir interfaces con una sintaxis bastante legible. Un ejemplo típico que vi replicado en varios tutoriales recientes de CRUD con Laravel 13 y Livewire 4 es algo así: un encabezado con flux:heading, un botón que abre un modal con flux:modal.trigger, y una tabla ordenable con flux:table que ya trae paginación y ordenamiento por columna resueltos. Lo que antes eran veinte líneas de Blade con clases de Tailwind repetidas por todos lados, ahora es una etiqueta con un par de atributos.
Flux tiene un nivel gratuito bastante generoso, pensado para cubrir lo esencial: botones, dropdowns, modales, inputs, checkboxes, radios y selects. Ahí es donde vive la mayoría de las pantallas de un CRM interno o un panel de administración estándar. Cuando el proyecto necesita algo más ambicioso, entra en juego Flux Pro, con componentes como calendarios, selectores de fecha, editores de texto enriquecido, paletas de comandos y gráficos, todos construidos siguiendo la misma lógica de accesibilidad y soporte para modo oscuro.
Lo que me parece más valioso (y lo que hay que tener en cuenta)
Lo que más rescato de Flux es que resuelve un problema real: la brecha entre «developer backend que sabe Livewire» y «developer que además tiene que diseñar interfaces prolijas». Con componentes pensados para teclado y lectores de pantalla desde el diseño, te ahorrás una capa entera de trabajo de accesibilidad que, seamos honestos, muchas veces queda para «después» y nunca llega.
Ahora bien, hay un matiz importante: los componentes más avanzados están detrás de una licencia Pro, así que si tu proyecto necesita gráficos, editor de texto enriquecido o un calendario completo, ese costo entra en la ecuación desde el día uno. También vale la pena mencionar que ya empezó a moverse un ecosistema alrededor de Flux —herramientas como constructores visuales de páginas tipo drag-and-drop que se apoyan en Flux UI Pro para armar módulos completos sin escribir código—, lo cual es una buena señal de adopción, pero también implica que el ecosistema todavía se está asentando.
Conclusión
Si estás por arrancar un proyecto nuevo con Laravel 13 y piensas usar Livewire, probar el starter kit oficial con Flux UI de entrada me parece el camino más razonable hoy. No solo por ahorrar tiempo de maquetado, sino porque te deja una base consistente de diseño desde el primer commit, algo que en proyectos que crecen con el tiempo termina siendo más valioso de lo que parece al principio. Todavía me falta llevarlo a un proyecto de producción más grande para sacar conclusiones sobre cómo escala en equipos, pero como primera impresión, Flux se siente como una herramienta hecha por gente que usa Livewire todos los días y sabe exactamente dónde duele.
Enlaces:
- Flux 2: https://laravel-news.com/flux-2-livewire-ui-kit
- Starter Kits: https://laravel.com/starter-kits
- Instalación: https://fluxui.dev/docs/installation
¡Saludos!
