SolandaUI: Componentes con identidad propia

Visión del proyecto

SolandaUI es una biblioteca de componentes web de nivel producción (v1.0 estable) que nace de una convicción: los componentes de interfaz no deberían depender de ningún framework específico. Nombrada en honor al barrio de Quito trazado en 1984 — vivo mucho más allá de sus límites originales — SolandaUI es una base ordenada que cada equipo hace propia. Funciona en Vue, React, Angular y HTML puro, porque no es de ninguno: es de la plataforma.

La biblioteca se construye sobre Custom Elements v1 y Shadow DOM: el mismo componente funciona en cualquier stack sin wrappers, adaptadores ni runtime de framework. Porque no es de ninguno: es de la plataforma.

¿Por qué SolandaUI?

Un plan claro que los equipos adoptan, adaptan y llevan mucho más allá de lo que el diseño original preveía.

Sin framework

Escríbelo una vez. Úsalo en todas partes.

<!-- Sin pasos previos: importa y usa -->
<script type="module">
  import '@federa/solanda-ui/sl-button'
</script>
<sl-button variant="default" size="lg">Guardar cambios</sl-button>

Ligereza

~27 KB gzip para la biblioteca completa. Con tree-shaking, pagás solo lo que usás:

6 Temas de serie

Cinco paletas con historia propia en claro y oscuro, más la base neutra:

1. Solanda — Terracota y concreto andino (tema por defecto)
2. Social Neutral — Sobrio y neutro, para productos serios
3. Catppuccin — Pastel suave, querido por la comunidad
4. Gruvbox — Retro cálido de inspiración terminal
5. Tokyo Night — Neón nocturno de alto contraste
6. Nord — Ártico, azulado y sereno

Accesibilidad

Roles ARIA nativos, focus trap en overlays, navegación completa por teclado en cada componente. Primero el teclado.

Design Tokens

Todo el sistema se controla con custom properties CSS. Tu marca entra como variables:

--sl-hsl-primary
--sl-radius-lg
--sl-spacing-4
--sl-shadow-md
--sl-font-family-base

Reemplazá los tokens y la biblioteca adopta tu marca sin resistencia.

Developer Experience

TypeScript + JSDoc

Tipos completos para cada componente y propiedad. Autocompletado en el editor sin configuración adicional.

custom-elements.json

Generado en cada build para que los editores y herramientas entiendan la API.

llms.txt

Archivo generado automáticamente para que asistentes de IA (Claude, Copilot, etc.) conozcan la biblioteca con el mismo detalle que vos.

Instalación

npm install @federa/solanda-ui

Sin pasos previos. Sin polyfills. Sin dependencias.

Arquitectura

Custom Elements v1 + Shadow DOM

Cada componente es un web component encapsulado. No hay runtime, no hay Virtual DOM, no hay React. El navegador lo entiende nativamente.

Tree-shakeable

Importá solo lo que necesitás:

import '@federa/solanda-ui/sl-button'
import '@federa/solanda-ui/sl-dialog'
import '@federa/solanda-ui/sl-input'
// ~6 KB total, no 27 KB

SSR Ready

Soporte para server-side rendering. Los componentes son inertes hasta que el JS carga en el cliente, y la hidratación es automática.

Métricas del proyecto

• 37 componentes (49 custom elements) cubriendo formularios, navegación, overlays y layout
• 17 etiquetas (releases) publicadas en npm
• 12 releases formales desde su creación (marzo 2026)
• 49 commits en el repositorio principal
• Licencia: AGPL-3.0
• Dependencias: 0 (solo Custom Elements + Shadow DOM nativo del navegador)

Casos de uso reales

¿Qué demuestra este proyecto?

1. Arquitectura de componentes a nivel plataforma: Construir sobre Web Components estándar significa que el código sobrevive a la obsolescencia de frameworks. No estás atado al ciclo de vida de React, Angular ni Vue.

2. Diseño de sistemas escalable: Los design tokens permiten que una sola biblioteca sirva a decenas de productos con marcas distintas, sin fork ni duplicación.

3. Performance por diseño: ~27 KB gzip con todo incluido. El tree-shaking lleva la carga real a ~6 KB cuando solo se necesitan tres componentes.

Aplicaciones empresariales

• UI Kit corporativo: Una sola biblioteca para todos los productos de una empresa, con temas personalizados por producto/marca.
• Componentes compartidos: Misma API entre frontend web, Nuxt SSR y aplicaciones móviles webview.
• Design systems como producto: La biblioteca en sí es el producto — versionada, documentada, con contratos API estables bajo semver.

FAQ

¿SolandaUI funciona con Vue, React o Angular?

Sí. Los Custom Elements son nativos del navegador. Podés usarlos directamente en HTML, o envolverlos en componentes de Vue (<sl-button>), React (React.createElement('sl-button')), o Angular (<sl-button> con standalone: true). No hay wrappers obligatorios.

¿Por qué cero dependencias?

Porque el navegador ya tiene todo lo que necesitás: Custom Elements, Shadow DOM, CSS Custom Properties, ES Modules. Cada dependencia externa añade bytes de bundle y ciclos de actualización. SolandaUI confía en lo que el navegador provee.

¿Es accesible por defecto?

Sí. Cada componente implementa roles ARIA, estados gestionados, focus visible y navegación por teclado. No necesitás agregar aria-* manualmente — el componente lo hace internamente.

¿Cuándo usaría SolandaUI en lugar de Material Web o Shoelace?

SolandaUI incluye temas personalizables (6 paletas incluidas), design tokens para branding corporativo, llms.txt para IA assistants, y está pensado como base que cada equipo adapta, no como catálogo que cada equipo copia. La API es estable bajo semver (1.0).

¿Cuál es la licencia?

AGPL-3.0. El código es libre para usar, modificar y distribuir, incluso en productos comerciales. Si modificás la biblioteca, las modificaciones deben compartirse bajo la misma licencia.

Roadmap

• Más componentes de formulario y datos (tablas, selectores, gráficos)
• Integración nativa con Svelte y Solid.js
• Soporte para Web Components en entornos nativos (Electron, Tauri)
• Generador de temas con editor visual en la web