Introduction to saastro/ui

¿Qué es saastro/ui?

saastro/ui es una colección de componentes UI para Astro construidos con Vanilla JavaScript puro.

Sin React. Sin dependencias externas. Solo HTML, CSS y JavaScript nativo.

🎯 Filosofía

Zero Dependencies, Maximum Performance

Cada componente de saastro/ui está diseñado para:

✨ Funcionar sin dependencias externas
⚡ Renderizarse en el servidor (SSR nativo con Astro)
🎨 Ofrecer la misma experiencia visual que sus equivalentes de React
♿ Ser completamente accesible (ARIA patterns completos)
📦 Pesar lo mínimo posible (~3KB por componente)

🆚 saastro/ui vs shadcn/ui

Comparación Técnica

Aspecto	saastro/ui	shadcn/ui
Framework	Astro + Vanilla JS	React
Dependencias	Zero	Radix UI + React
Bundle Size	~3KB por componente	~175KB (React + Radix)
Renderizado	SSR nativo	CSR con hydration
JavaScript	Solo para interactividad	Runtime completo de React
Performance	⚡⚡⚡ Superior	⚡ Buena
SEO	Excelente (HTML estático)	Bueno (requiere hydration)
Accesibilidad	Manual (ARIA patterns)	Radix UI (out-of-the-box)

Métricas de Performance

React + Radix UI:  ~175KB (minified + gzipped)
saastro/ui:        ~3KB   (minified + gzipped)

Reducción: 98% menos JavaScript

💡 ¿Cuándo usar cada uno?

Usa saastro/ui cuando:

✅ Priorizas performance y quieres el mínimo JavaScript posible
✅ Usas Astro como framework principal
✅ Necesitas SSR nativo sin overhead de hydration
✅ Quieres control total sobre la implementación
✅ Tu proyecto es content-first (blogs, docs, marketing sites)

Usa shadcn/ui cuando:

⚛️ Ya usas React en tu proyecto
⚛️ Necesitas el ecosistema de React (hooks, context, etc.)
⚛️ Prefieres usar librerías probadas como Radix UI
⚛️ Tu app es altamente interactiva (dashboards, SPAs)
⚛️ Priorizas velocidad de desarrollo sobre tamaño del bundle

🔍 ¿Por qué mostramos comparaciones con React?

En la documentación de cada componente, mostramos ambas versiones (Astro y React) para:

Demostrar equivalencia funcional - Misma UX, diferente implementación
Facilitar la migración - Si vienes de React/shadcn/ui
Educar sobre performance - Ver el impacto real del approach vanilla
Compartir datos de ejemplo - DRY (Don’t Repeat Yourself)

Nota: Los ejemplos React usan los mismos datos que los ejemplos Astro para garantizar consistencia.

🚀 Ventajas de Vanilla JavaScript

1. Performance Superior

Time to Interactive (TTI):
- React: 2.5-3.5s
- Vanilla: 1.0-1.5s

First Contentful Paint (FCP):
- React: 1.8s
- Vanilla: 0.9s

2. SEO Optimizado

El HTML se genera completamente en el servidor. Los buscadores ven contenido inmediatamente, sin esperar hydration.

3. Graceful Degradation

Los componentes funcionan incluso si JavaScript falla o está deshabilitado (progresiva enhancement).

4. Sin Overhead de Runtime

No hay necesidad de cargar React, Virtual DOM, reconciliación, etc. Solo el código estrictamente necesario.

⚠️ Trade-offs

Ventajas de usar Radix UI (React):

🔧 Más features out-of-the-box
🧪 Ampliamente testeado por la comunidad
📚 Documentación extensa
🔄 Actualizaciones y mantenimiento activo

Desventajas de Vanilla:

🛠️ Más código manual para mantener
🧪 Necesitas testear la implementación
📖 Menos recursos comunitarios
⏰ Puede tomar más tiempo implementar features complejas

📊 Casos de Uso Ideales

saastro/ui es perfecto para:

📝 Blogs y sitios de contenido
📖 Documentación técnica
🏢 Sitios corporativos
🛍️ E-commerce (páginas de producto)
📱 Landing pages
🎨 Portfolios

shadcn/ui es mejor para:

📊 Dashboards complejos
💬 Aplicaciones de chat
🎮 Aplicaciones interactivas
🔄 SPAs (Single Page Applications)
📱 Web apps con mucho estado

🎓 Principios de Diseño

1. Progressive Enhancement

Los componentes deben funcionar sin JavaScript cuando sea posible.

2. Accessibility First

Implementación completa de ARIA patterns y navegación por teclado.

3. Minimal JavaScript

Solo cargar y ejecutar el código estrictamente necesario.

4. Server-First

Aprovechar el SSR de Astro para generar HTML estático.

5. DX (Developer Experience)

API simple e intuitiva, similar a React para facilitar adopción.

🚦 Getting Started

Listo para empezar? Dirígete a la página de instalación o explora los componentes disponibles.

Navigation menu