astro-components v2.0 — 150 Componentes en npm

Hoy publiqué @wendermedia/astro-components v2.0 como paquete npm público. La librería contiene 150 componentes Astro en 17 categorías — desde herramientas de accesibilidad hasta componentes SEO y secciones de página completas. Todo construido con CSS custom properties, sin dependencias externas, compatible con RGPD.

No me creas — compruébalo tú mismo

Cuando evalúas librerías de componentes, nadie quiere listas con viñetas. Quieres ver cómo lucen y se comportan los componentes realmente.

Para eso existe el Storybook en vivo: wm-astro-components.netlify.app

549 stories — cada componente con controles interactivos, diferentes estados y variantes. Verificaciones de accesibilidad integradas. Sin instalación local, sin registro. Solo abre y navega.

¿Qué incluye?

Las 17 categorías cubren todo lo necesario para un sitio web Astro completo:

Además: formularios, utilidades de contenido, componentes sociales, un proveedor de sistema de diseño, componentes de imagen optimizados y una galería con slider antes/después.

Esta librería vs. alternativas

Antes de comprometerte con una librería de componentes, vale la pena comparar. Aquí los tres enfoques más comunes:

Inicio rápido: instalación y primer componente

De cero a una página funcional con SEO, accesibilidad y sistema de diseño en dos minutos:

Ejemplos de importación por categoría

Diferentes tipos de proyecto necesitan diferentes categorías. Aquí tres setups típicos:

---
// Secciones de página y componentes de layout
import { Hero, Features, FAQ, CTA, Pricing } from '@wendermedia/astro-components/sections';
import { Testimonials, Team, Timeline } from '@wendermedia/astro-components/sections';
import { BentoLayout, MagazineLayout } from '@wendermedia/astro-components/layouts';
import { Header, Footer } from '@wendermedia/astro-components/layout';
---

<Header />
<Hero title="Bienvenido" subtitle="Subtítulo" />
<Features features={[{ title: 'Rápido', description: 'Cero JS.' }]} />
<FAQ items={[{ question: '¿Pregunta?', answer: 'Respuesta.' }]} />
<Footer />

---
// Componentes SEO para datos estructurados
import { SEO } from '@wendermedia/astro-components/seo';
import { JsonLd } from '@wendermedia/astro-components/seo';
import { OpenGraph } from '@wendermedia/astro-components/seo';
import { Hreflang } from '@wendermedia/astro-components/seo';
import { Canonical } from '@wendermedia/astro-components/seo';
---

<SEO title="Mi Sitio" description="Descripción" />
<JsonLd type="LocalBusiness" data={{
  name: 'Nombre de Empresa',
  address: { street: 'Calle 1', city: 'Ciudad' }
}} />
<Hreflang alternates={[
  { lang: 'de', href: '/de/' },
  { lang: 'en', href: '/en/' },
]} />

---
// Accesibilidad / WCAG 2.2 AA
import { SkipLinks } from '@wendermedia/astro-components/accessibility';
import { FocusTrap } from '@wendermedia/astro-components/accessibility';
import { AccessibilityToolbar } from '@wendermedia/astro-components/accessibility';
import { FontResizer } from '@wendermedia/astro-components/accessibility';
import { ThemeToggle } from '@wendermedia/astro-components/accessibility';
import { TextToSpeech } from '@wendermedia/astro-components/accessibility';
import { LiveRegion } from '@wendermedia/astro-components/accessibility';
---

<SkipLinks />
<AccessibilityToolbar position="right" />
<FontResizer />
<ThemeToggle />
<TextToSpeech selector="article" />
<LiveRegion politeness="polite" />

¿Por qué open source?

Estos componentes fueron construidos y probados en 187 proyectos. Funcionan en sitios web, prototipos, landing pages y tiendas e-commerce. En algún punto, mantenerlo todo interno deja de tener sentido.

Open source aquí no significa “proyecto comunitario con issues y pull requests” — significa: la librería está disponible públicamente, el código fuente es transparente, y otros proyectos pueden construir sobre ella.

CLI incluido

El paquete incluye una herramienta CLI para crear proyectos nuevos:

npx create-wm-component

Ocho templates disponibles: Blog, E-Commerce, Landing Page, Portfolio, Corporate, Docs, SaaS y Affiliate. Cada template configura los componentes, layouts y design tokens correctos.

Sistema de diseño como base

Los 150 componentes comparten el mismo sistema de tokens: CSS custom properties para colores, tipografía, espaciado, sombras y radios. Un DesignSystemProvider en la categoría design-system provee los tokens base. Sobrescribe con tus propios valores — el branding se mantiene consistente.

---
import { DesignSystemProvider } from '@wendermedia/astro-components/design-system';
---

<DesignSystemProvider
  primaryColor="#2563eb"
  fontFamily="Inter, sans-serif"
  borderRadius="0.5rem"
/>

Si prefieres escribir CSS directamente, también puedes configurar los tokens manualmente en un archivo CSS global:

:root {
  --color-primary-500: #2563eb;
  --font-family-body: 'Inter', sans-serif;
  --radius-md: 0.5rem;
}

Preguntas frecuentes

¿Qué sigue?

La librería es estable y lista para producción. Planificado:

• Integraciones con frameworks: Los wrappers de React, Vue, Svelte y Solid ya existen en la carpeta integrations/
• Expansión de Storybook: Más stories y variantes para casos especiales
• Presets de design tokens: Temas predefinidos para diferentes industrias

Código fuente, paquete npm y Storybook:

• npm: @wendermedia/astro-components
• GitHub: arnoldwender/wm-project-astro-components
• Storybook: wm-astro-components.netlify.app