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\u00e9 a revisar c\u00f3mo est\u00e1 armado el kit oficial de Livewire para Laravel 13, not\u00e9 que Flux ya no es un componente m\u00e1s de la lista de dependencias, sino la base visual completa sobre la que se construye la aplicaci\u00f3n. Y eso, para quienes venimos peleando durante a\u00f1os con Blade \u00aba mano\u00bb o con librer\u00edas de componentes pensadas para SPA, cambia bastante el punto de partida.<\/p>\n\n\n\n
\u00bfQu\u00e9 es exactamente Flux UI? Lo interesante es que no reemplaza a Livewire, lo complementa. T\u00fa sigues escribiendo tu l\u00f3gica en PHP como siempre, pero el \u00abcascar\u00f3n\u00bb visual \u2014el que normalmente te toma m\u00e1s tiempo del que te gustar\u00eda admitir\u2014 ya viene armado, probado y pensado para funcionar bien tanto en desktop como en mobile.<\/p>\n\n\n\n Por qu\u00e9 aparece justo ahora en Laravel 13<\/p>\n\n\n\n Ac\u00e1 viene la parte que m\u00e1s me llam\u00f3 la atenci\u00f3n. El starter kit oficial de Livewire para Laravel 13 combina Livewire, Tailwind y Flux UI como stack por defecto, dejando toda la l\u00f3gica de frontend y backend directamente dentro de tu aplicaci\u00f3n para que puedas modificarla sin pelear contra una \u00abcaja negra\u00bb. Es la misma filosof\u00eda 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\u00edas que salir a buscar librer\u00edas de terceros o armar tu propio sistema de dise\u00f1o desde cero.<\/p>\n\n\n\n En paralelo, Flux lleg\u00f3 a su versi\u00f3n 2.0, y ah\u00ed el equipo tom\u00f3 una decisi\u00f3n que se nota en el d\u00eda a d\u00eda: en lugar de integrar librer\u00edas externas de gr\u00e1ficos o selectores de fecha, construyeron esos componentes desde cero. El resultado son piezas m\u00e1s livianas \u2014apenas unos kilobytes extra al bundle final\u2014 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\u00f3n.<\/p>\n\n\n\n C\u00f3mo se usa en la pr\u00e1ctica<\/p>\n\n\n\n La instalaci\u00f3n es la t\u00edpica de Laravel: un <\/p>\n\n\n\n y dos directivas Blade ( Flux tiene un nivel gratuito bastante generoso, pensado para cubrir lo esencial: botones, dropdowns, modales, inputs, checkboxes, radios y selects. Ah\u00ed es donde vive la mayor\u00eda de las pantallas de un CRM interno o un panel de administraci\u00f3n est\u00e1ndar. Cuando el proyecto necesita algo m\u00e1s ambicioso, entra en juego Flux Pro<\/strong>, con componentes como calendarios, selectores de fecha, editores de texto enriquecido, paletas de comandos y gr\u00e1ficos, todos construidos siguiendo la misma l\u00f3gica de accesibilidad y soporte para modo oscuro.<\/p>\n\n\n\n Lo que me parece m\u00e1s valioso (y lo que hay que tener en cuenta)<\/p>\n\n\n\n Lo que m\u00e1s rescato de Flux es que resuelve un problema real: la brecha entre \u00abdeveloper backend que sabe Livewire\u00bb y \u00abdeveloper que adem\u00e1s tiene que dise\u00f1ar interfaces prolijas\u00bb. Con componentes pensados para teclado y lectores de pantalla desde el dise\u00f1o, te ahorr\u00e1s una capa entera de trabajo de accesibilidad que, seamos honestos, muchas veces queda para \u00abdespu\u00e9s\u00bb y nunca llega.<\/p>\n\n\n\n Ahora bien, hay un matiz importante: los componentes m\u00e1s avanzados est\u00e1n detr\u00e1s de una licencia Pro, as\u00ed que si tu proyecto necesita gr\u00e1ficos, editor de texto enriquecido o un calendario completo, ese costo entra en la ecuaci\u00f3n desde el d\u00eda uno. Tambi\u00e9n vale la pena mencionar que ya empez\u00f3 a moverse un ecosistema alrededor de Flux \u2014herramientas como constructores visuales de p\u00e1ginas tipo drag-and-drop que se apoyan en Flux UI Pro para armar m\u00f3dulos completos sin escribir c\u00f3digo\u2014, lo cual es una buena se\u00f1al de adopci\u00f3n, pero tambi\u00e9n implica que el ecosistema todav\u00eda se est\u00e1 asentando.<\/p>\n\n\n\n Conclusi\u00f3n<\/p>\n\n\n\n Si est\u00e1s 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\u00e1s razonable hoy. No solo por ahorrar tiempo de maquetado, sino porque te deja una base consistente de dise\u00f1o desde el primer commit, algo que en proyectos que crecen con el tiempo termina siendo m\u00e1s valioso de lo que parece al principio. Todav\u00eda me falta llevarlo a un proyecto de producci\u00f3n m\u00e1s grande para sacar conclusiones sobre c\u00f3mo escala en equipos, pero como primera impresi\u00f3n, Flux se siente como una herramienta hecha por gente que usa Livewire todos los d\u00edas y sabe exactamente d\u00f3nde duele.<\/p>\n\n\n\n Enlaces:<\/p>\n\n\n\n
Flux es la librer\u00eda oficial de componentes para Livewire, construida por el mismo equipo detr\u00e1s de Livewire y Alpine.js. La idea de fondo es simple: en vez de escribir un bot\u00f3n, un modal o una tabla desde cero cada vez, us\u00e1s una sintaxis tipo HTML \u2014algo como <flux:button><\/code> o <flux:modal><\/code>\u2014 y Flux se encarga del resto: estilos con Tailwind CSS, accesibilidad, modo oscuro y comportamiento responsive ya resueltos de f\u00e1brica.<\/p>\n\n\n\ncomposer require livewire\/flux<\/code> <\/p>\n\n\n\n@fluxAppearance<\/code> y @fluxScripts<\/code>) en tu layout principal. A partir de ah\u00ed, empez\u00e1s a escribir interfaces con una sintaxis bastante legible. Un ejemplo t\u00edpico que vi replicado en varios tutoriales recientes de CRUD con Laravel 13 y Livewire 4 es algo as\u00ed: un encabezado con flux:heading<\/code>, un bot\u00f3n que abre un modal con flux:modal.trigger<\/code>, y una tabla ordenable con flux:table<\/code> que ya trae paginaci\u00f3n y ordenamiento por columna resueltos. Lo que antes eran veinte l\u00edneas de Blade con clases de Tailwind repetidas por todos lados, ahora es una etiqueta con un par de atributos.<\/p>\n\n\n\n