astro-components v2.0 — 150 Komponenten auf npm

Heute habe ich @wendermedia/astro-components v2.0 als öffentliches npm-Paket veröffentlicht. Die Library enthält 150 Astro-Komponenten in 17 Kategorien — von Accessibility-Werkzeugen über SEO-Komponenten bis hin zu kompletten Seitenabschnitten. Alles mit CSS Custom Properties, ohne externe Abhängigkeiten, DSGVO-konform.

Nicht glauben — anschauen

Wer Komponentenbibliotheken evaluiert, will keine Bullet-Listen. Man will sehen, wie die Komponenten tatsächlich aussehen und sich verhalten.

Genau dafür gibt es das Live-Storybook: wm-astro-components.netlify.app

549 Stories — jede Komponente mit interaktiven Controls, verschiedenen Zuständen und Varianten. Accessibility-Checks sind direkt integriert. Keine lokale Installation nötig, keine Registrierung. Einfach öffnen und durchklicken.

Was ist drin?

Die 17 Kategorien decken ab, was man für eine vollständige Astro-Website braucht:

Dazu kommen Forms, Content-Utilities, Social-Komponenten, ein Design-System-Provider, optimierte Bildkomponenten und eine Gallery mit Before/After-Slider.

Diese Library vs. Alternativen

Bevor man sich für eine Komponentenbibliothek entscheidet, lohnt der Vergleich. Hier die drei gängigsten Ansätze:

Schnellstart: Installation und erste Komponente

In zwei Minuten von null auf eine funktionierende Seite mit SEO, Accessibility und Design System:

Import-Beispiele nach Kategorie

Je nach Projekttyp braucht man unterschiedliche Kategorien. Hier drei typische Setups:

---
// Seitenabschnitte und Layout-Komponenten
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="Willkommen" subtitle="Untertitel" />
<Features features={[{ title: 'Schnell', description: 'Zero JS.' }]} />
<FAQ items={[{ question: 'Frage?', answer: 'Antwort.' }]} />
<Footer />

---
// SEO-Komponenten für strukturierte Daten
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="Meine Seite" description="Beschreibung" />
<JsonLd type="LocalBusiness" data={{
  name: 'Firmenname',
  address: { street: 'Straße 1', city: 'Stadt' }
}} />
<Hreflang alternates={[
  { lang: 'de', href: '/de/' },
  { lang: 'en', href: '/en/' },
]} />

---
// Barrierefreiheit / BFSG 2025
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" />

Warum Open Source?

Diese Komponenten sind über 187 Projekte hinweg entstanden und getestet. Sie laufen auf Websites, Prototypen, Landing Pages und E-Commerce-Shops. Irgendwann macht es keinen Sinn mehr, das nur intern zu halten.

Open Source bedeutet hier nicht “Community-Projekt mit Issues und Pull Requests” — es bedeutet: Die Library ist öffentlich verfügbar, der Quellcode ist einsehbar, und Projekte können darauf aufbauen.

CLI-Tool inklusive

Das Paket enthält ein CLI-Tool zum Scaffolden neuer Projekte:

npx create-wm-component

Acht Templates stehen zur Auswahl: Blog, E-Commerce, Landing Page, Portfolio, Corporate, Docs, SaaS und Affiliate. Jedes Template setzt die richtigen Komponenten, Layouts und Design Tokens auf.

Design System als Basis

Alle 150 Komponenten nutzen dasselbe Token-System: CSS Custom Properties für Farben, Typografie, Abstände, Schatten und Radien. Ein DesignSystemProvider in der design-system-Kategorie liefert die Basis-Tokens. Eigene Werte überschreiben die Defaults — das Branding bleibt konsistent.

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

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

Wer lieber direkt CSS schreibt, kann die Tokens auch manuell in einer globalen CSS-Datei setzen:

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

Häufig gestellte Fragen

Was kommt als Nächstes?

Die Library ist stabil und production-ready. Geplant sind:

• Framework-Integrationen: React-, Vue-, Svelte- und Solid-Wrapper existieren bereits im integrations/-Ordner
• Storybook-Erweiterung: Weitere Stories und Varianten für Edge Cases
• Design Token Presets: Vordefinierte Themes für verschiedene Branchen

Der Quellcode, das npm-Paket und das Storybook:

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