Hub-UI: 26 librerías Angular open source en producción
Producto propio de Frog Hub: 26 librerías de componentes para Angular, publicadas en abierto en NPM y usadas en producción.
En cifras
librerías publicadas en NPM
descargas al mes (septiembre de 2026)
variables CSS de diseño compartidas
librerías publicadas en NPM
descargas al mes (septiembre de 2026)
variables CSS de diseño compartidas
En desarrollo continuo
Producto propio: diseño, desarrollo y mantenimiento
Carlos Morcillo — creador y mantenedor
Nació de rehacer lo mismo en cada proyecto
Hub-UI es un producto propio de Frog Hub. Es la base de interfaz de los proyectos Angular del estudio y está publicado en abierto para quien quiera usarlo, con la documentación y las demos en hubui.dev.
1
Que cada proyecto instale solo los componentes que usa
2
Accesibilidad WCAG 2.1 en todos los componentes
3
Temas intercambiables sin recompilar
4
Versiones alineadas con cada major de Angular
EL PROYECTO QUE ENTRÓ EN EL ESTANQUE
Cada proyecto repetía tablas, formularios, modales y calendarios, con pequeñas variaciones y los mismos errores. Un fallo de accesibilidad arreglado en un proyecto seguía vivo en los otros seis, y las librerías de terceros ataban al criterio y al ritmo de mantenimiento de otro.
Y CÓMO SALIÓ
Un ecosistema mantenido con estándares de producto. Un proyecto nuevo arranca sobre componentes que llevan años en producción, y cualquiera puede revisar el código antes de contratar.
ENTREGA
Veintiséis paquetes, un solo sistema
Librerías independientes en NPM sobre una base común de variables de diseño, publicación automática con GitHub Actions y documentación con demos en vivo en hubui.dev, traducida a ocho idiomas.
El componente de tablero Kanban funcionando en la documentación, con arrastrar y soltar.
DECISIONES
Tres decisiones y lo que se descartó para tomarlas
Standalone y con Signals
Se descartaron los NgModules: con ellos, usar un componente suelto arrastraba medio ecosistema. Con Signals, además, hay menos trabajo de renderizado que con Zone.js.
2
Las variables como única capa visual
Se descartó mantener una hoja de estilos por tema. Más de mil variables CSS gobiernan color, espaciado, tipografía y elevación, y adaptar la librería a una marca es cambiar valores, sin bifurcar el código.
3
Veintiséis paquetes en lugar de uno
Se descartó un paquete único, más fácil de publicar. Separados, cada proyecto instala lo que usa y corregir el calendario no obliga a revisar una aplicación que solo usa las tablas.
INSIGHTS
Más de treinta y seis mil descargas mensuales en NPM y adopción en producción como base de interfaz de productos empresariales, dentro y fuera de nuestros proyectos.
Para un cliente de Frog Hub el efecto es directo: la interfaz de su proyecto arranca sobre componentes que ya llevan años corriendo en otros sistemas. Menos tiempo de construcción, menos errores conocidos y una ruta de mantenimiento que no depende de que sigamos siendo su proveedor, porque el código es abierto y está documentado.
El proyecto también funciona como prueba pública de cómo trabajamos: cualquiera puede auditar el código, las decisiones de accesibilidad y el ritmo de mantenimiento antes de contratarnos.
REFLEXIONES
Qué haríamos distinto
Mantener veintiséis paquetes en abierto obliga a decidir qué no entra, y esa disciplina se ha colado en el trabajo de cliente: cuando un componente tiene que servir a proyectos que no conoces, dejas de añadir opciones «por si acaso» y empiezas a defender la API que ya tienes.
La otra lección es el coste de la compatibilidad. Alinear las versiones con cada major de Angular obliga a un trabajo de migración cada seis meses que nadie ve y que nadie paga. Se sostiene porque ese mismo trabajo es el que después nos permite actualizar el proyecto de un cliente en días en lugar de en semanas.
Vamos con el siguiente paso
Cuéntanos qué idea tienes entre manos
Nos cuentas el proyecto, te decimos si podemos ayudarte y cuánto costaría. Sin compromiso y sin la burocracia de una agencia.
Respondemos en 24 – 48 horas y tendrás tu presupuesto cerrado