Flin
All Flin articles.
FlinUI: sistema de componentes sin importaciones
Cómo funciona el sistema de componentes sin importaciones de FLIN -- autodescubrimiento, detección PascalCase, el ComponentRegistry, y por qué los componentes funcionan como etiquetas HTML sin ningún boilerplate.
De cero a 70 componentes en una sesión
Cómo construimos 70 componentes UI listos para producción en una sola sesión de 45 minutos usando agentes de IA paralelos -- el sprint de la Sesión 037 que creó FlinUI v1.0.0.
FlinUI completo: más de 365 componentes
Cómo FlinUI creció de 70 componentes iniciales a una biblioteca completa de más de 365 elementos UI listos para producción -- cubriendo UI básica, formularios, gráficos, empresa, IA y componentes móviles.
Componentes de gráficos y visualización de datos
Cómo los 25 componentes de gráficos de FlinUI renderizan visualizaciones de datos con marcado FLIN puro -- desde gráficos de líneas hasta treemaps, todos declarativos, reactivos y sin dependencias.
Tokens de diseño y sistema de temas
Cómo el sistema de tokens de diseño de FlinUI proporciona más de 50 tokens para colores, espaciado, tipografía y sombras -- habilitando temas consistentes y modo oscuro en más de 365 componentes.
El sistema de diseño de página
Cómo los componentes de diseño de FlinUI -- Container, Stack, Grid, Flex, Split -- reemplazan el CSS personalizado con primitivas de diseño declarativas y responsivas que se componen naturalmente.
Integración de biblioteca de íconos
Cómo FlinUI integra más de 1,000 íconos Lucide como componentes integrados -- disponibles sin importaciones, renderizados como SVG en línea, personalizables en tamaño y color.
El ciclo de vida de los componentes
Cómo los componentes FLIN gestionan su ciclo de vida -- onMount para inicialización, onUpdate para reacciones, onUnmount para limpieza -- con un modelo más simple que React o Vue.
Slots y proyección de contenido
Cómo el sistema de slots de FLIN habilita la composición de componentes -- slots por defecto para hijos, slots con nombre para diseños estructurados, y contenido de respaldo para slots vacíos.
Reactividad a nivel de atributos
Cómo el sistema de reactividad de grano fino de FLIN rastrea dependencias a nivel de atributo -- actualizando solo los atributos DOM específicos que cambian, no componentes enteros.
Alternancia de tema y modo oscuro
Cómo el sistema de temas de FLIN soporta modos claro, oscuro y preferencia del sistema -- con transiciones suaves, preferencias persistentes e integración sin configuración en todos los componentes FlinUI.
La etiqueta raw: válvula de escape para HTML
Cómo la etiqueta <raw> de FLIN permite inyectar HTML confiable directamente en el DOM -- potenciando el renderizado de markdown, íconos SVG y visualización de contenido enriquecido manteniendo la seguridad.