@wendermedia/astro-components

v4.0.2

Published

9 days ago

Complete Astro 7 development resource - components, bundles, integrations, and utilities

Downloads

533

What's new in 4.0

Astro 6 & 7 — runs on both majors (peer astro@^6.0.0 || ^7.0.0). Astro 7 brings the Rust compiler (default & only) and Vite 8; every component compiles clean on both.
Tailwind 4 in templates via @tailwindcss/vite (@astrojs/tailwind was removed because it is EOL on Astro 6).
Wender Media Source License v1.0 — source-available, free for commercial and non-commercial use, with an attribution recommendation (see Attribution).
Storybook 10 as the internal documentation runner.
Node 22.12+ required.

If you need the previous Astro 4/5 + MIT version, pin @wendermedia/[email protected] — that release stays on npm.

See docs/MIGRATION-2.x-to-3.0.md for the full upgrade guide.

Features

183 Components across 18 categories, ready for production
WCAG 2.1 AA Compliant with full accessibility support and BFSG 2025 readiness
GDPR/DSGVO Ready with privacy-first design and consent management
TypeScript First with complete type definitions for all components
Design Token System powered by Style Dictionary for consistent theming
Dark Mode Support via CSS custom properties
Zero Third-Party Tracking by default
Astro 6 compatible with ClientRouter, Content Layer API, and Tailwind 4
Framework Integrations for React, Vue, Svelte, and Solid
WordPress Headless CMS integration included

Requirements

Astro 6.0 or higher
Node.js 22.12 or higher
TypeScript 5.x (recommended)

Optional Peer Dependencies

@astrojs/react — React island support
@astrojs/vue — Vue island support
@astrojs/svelte — Svelte island support
@astrojs/solid-js — Solid island support
@tailwindcss/vite + tailwindcss@^4 — styling for the templates
GSAP — Hero animations

Installation

npm install @wendermedia/astro-components

Make sure your project already has Astro 6 or 7 installed:

npm install astro@^7   # or astro@^6 — the package supports both

Or install the components package directly from GitHub:

npm install git+https://github.com/arnoldwender/wm-project-astro-components.git

Upgrading from 3.x? Read docs/MIGRATION-3.x-to-4.0.md — it covers Astro 7, the ^6 || ^7 peer range, and the gsap optional peer. Coming from 2.x? See docs/MIGRATION-2.x-to-3.0.md first.

CLI Scaffolding

# Create a new project with pre-configured templates
npx @wendermedia/astro-components create my-project

# With a specific template
npx @wendermedia/astro-components create my-shop --template=ecommerce

# List available templates
npx @wendermedia/astro-components list

Available Templates

| Template | Description | |----------|-------------| | default | Full-featured with all components | | minimal | Lightweight with core components | | ecommerce | Optimized for online shops | | blog | Content-focused with SEO | | landing | Single-page marketing sites |

Quick Start

---
import { SEO } from '@wendermedia/astro-components/seo';
import { Header, Footer } from '@wendermedia/astro-components/layout';
import { CookieConsent } from '@wendermedia/astro-components/accessibility';
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <SEO
      title="My Site"
      description="Built with @wendermedia/astro-components"
      siteName="My Site"
    />
  </head>
  <body>
    <Header
      navItems={[
        { label: 'Home', href: '/' },
        { label: 'About', href: '/about' },
      ]}
      siteName="My Site"
    />

    <main>
      <slot />
    </main>

    <Footer siteName="My Site" />
    <CookieConsent />
  </body>
</html>

Components

Overview (18 Categories, 183 Components)

| Category | Components | Import Path | |----------|-----------|-------------| | Layout | Header, Footer, Container, Grid, Section | @wendermedia/astro-components/layout | | Layouts | Bento, Magazine, Dashboard, Portfolio, Newspaper, Split, Landing, Article, Docs, HeroLayout, ProductGrid | @wendermedia/astro-components/layouts | | SEO | SEOHead, SchemaOrg/JsonLD, OpenGraph, TwitterCard, Canonical, RichSnippets, HreflangTags, Breadcrumbs | @wendermedia/astro-components/seo | | Accessibility | CookieConsent, SkipLinks, FontResizer, ThemeToggle, BackToTop, FocusTrap, LanguageSwitcher, TextToSpeech, ScreenReaderOnly, LiveRegion, ReducedMotion, AccessibilityToolbar | @wendermedia/astro-components/accessibility | | Navigation | Breadcrumbs, Pagination, MobileNav, Sidebar | @wendermedia/astro-components/navigation | | UI | Accordion, Alert, Avatar, Badge, CommandPalette, Drawer, Dropdown, Modal, NewsTicker, Progress, Skeleton, Tabs, Toast, Tooltip | @wendermedia/astro-components/ui | | Sections | Hero, CTA, Pricing, Team, Testimonials, FAQ, Features, Stats, Blog, Gallery, Contact, Timeline, Awards, Careers, CaseStudy, Comparison, Integrations, LogoCloud, Maintenance, Newsletter, Search, Video, and more | @wendermedia/astro-components/sections | | E-commerce | Cart, ProductCard, ProductQuickView, Wishlist, AddToCartButton | @wendermedia/astro-components/ecommerce | | Forms | ContactForm, Contact, Newsletter | @wendermedia/astro-components/forms | | Media | VideoPlayer (YouTube/Vimeo/native), AudioPlayer, ImageGallery | @wendermedia/astro-components/media | | Maps | GoogleMap (GDPR), OpenStreetMap | @wendermedia/astro-components/maps | | Gallery | BeforeAfter (image comparison slider) | @wendermedia/astro-components/gallery | | Images | OptimizedImage | @wendermedia/astro-components/images | | Products | ProductCard (affiliate) | @wendermedia/astro-components/products | | Social | SocialShare, SocialFollow | @wendermedia/astro-components/social | | Content | ReadingProgress, ShareBar, TableOfContents | @wendermedia/astro-components/content | | Design System | DesignSystemProvider, tokens, base styles, utilities | @wendermedia/astro-components/design-system |

Component Examples

GDPR-Compliant Video Player

---
import { VideoPlayer } from '@wendermedia/astro-components/media';
---

<!-- YouTube with consent gate -->
<VideoPlayer
  provider="youtube"
  videoId="dQw4w9WgXcQ"
  title="Video Title"
  requireConsent={true}
  consentMessage="By playing, you agree to data processing by YouTube."
/>

<!-- Self-hosted video -->
<VideoPlayer
  src="/videos/intro.mp4"
  poster="/images/poster.jpg"
  controls={true}
/>

E-commerce Cart

---
import { Cart, ProductCard } from '@wendermedia/astro-components/ecommerce';
---

<ProductCard
  id="prod-001"
  name="Premium Headphones"
  price={149.99}
  image="/headphones.jpg"
  showWishlist={true}
  showQuickView={true}
/>

<Cart currency="EUR" locale="de-DE" checkoutUrl="/checkout" />

Breadcrumbs with Schema.org

---
import { Breadcrumbs } from '@wendermedia/astro-components/navigation';
---

<Breadcrumbs
  items={[
    { name: 'Home', url: '/' },
    { name: 'Products', url: '/products' },
    { name: 'Headphones', url: '/products/headphones' },
  ]}
  showSchema={true}
/>

Cookie Consent (GDPR)

---
import { CookieConsent } from '@wendermedia/astro-components/accessibility';
---

<CookieConsent
  showSettings={true}
  analyticsEnabled={false}
  marketingEnabled={false}
  privacyUrl="/datenschutz"
  position="bottom"
/>

Design Tokens

Centralized design system powered by Style Dictionary:

npm run tokens:build

Using Tokens

/* CSS Custom Properties */
@import '@wendermedia/astro-components/tokens/dist/tokens.css';

.button {
  background: var(--color-brand-primary);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--border-radius-lg);
}

// JavaScript / TypeScript
import { tokens } from '@wendermedia/astro-components/tokens';

const primaryColor = tokens.color.brand.primary.value;

// SCSS
@use '@wendermedia/astro-components/tokens/dist/tokens';

.button {
  background: tokens.$color-brand-primary;
}

Testing

# Unit tests
npm run test

# With coverage
npm run test:coverage

# Accessibility tests (axe-core)
npm run test:a11y

Testing Utilities

import {
  runA11yAudit,
  expectNoA11yViolations,
} from '@wendermedia/astro-components/testing';

describe('MyComponent', () => {
  it('has no accessibility violations', async () => {
    const element = document.querySelector('.my-component');
    await expectNoA11yViolations(element);
  });
});

Storybook

Browse all 183 components interactively at astro.wendermedia.com.

Run locally:

npm run storybook        # Start dev server on port 6006
npm run build-storybook  # Build static site

WordPress Integration

Connect to WordPress as a headless CMS:

import {
  createWordPressClient,
  fetchPosts,
  fetchMenus,
} from '@wendermedia/astro-components/integrations/wordpress';

const wp = createWordPressClient({
  url: 'https://your-wordpress-site.com',
});

const posts = await fetchPosts(wp, { perPage: 10 });
const menu = await fetchMenus(wp);

See the WordPress Integration Guide for full documentation.

Project Structure

@wendermedia/astro-components/
  src/
    accessibility/     # A11y components
    content/           # Content components
    design-system/     # Base styles & tokens
    ecommerce/         # E-commerce components
    forms/             # Form components
    gallery/           # Gallery components
    images/            # Image optimization
    layout/            # Layout components
    layouts/           # Page layout templates
    maps/              # Map components
    media/             # Media players
    navigation/        # Navigation components
    products/          # Product display
    sections/          # Section templates
    seo/               # SEO components
    social/            # Social components
    ui/                # UI primitives
  integrations/        # Framework integrations (React, Vue, Svelte, Solid, WordPress)
  tokens/              # Design tokens (Style Dictionary)
  testing/             # Test utilities
  cli/                 # CLI scaffolding tool
  templates/           # Project templates (Astro 6 + Tailwind 4)
  bundles/             # Pre-configured project bundles (blog, corporate, ecommerce, ...)
  docs/                # Documentation

Browser Support

Chrome / Edge 90+
Firefox 90+
Safari 14+
iOS Safari / Chrome Android

Contributing

We welcome contributions. Please read our Contributing Guide before submitting a Pull Request.

Fork the repository
Create a feature branch: git checkout -b feat/amazing-feature
Make your changes following the coding standards
Run tests: npm run test
Add a changeset: npm run changeset
Submit a Pull Request

By submitting a Contribution you agree to license it under the Wender Media Source License v1.0 (see Section 7 of the License).

Please also review our Code of Conduct.

Versioning

We use Changesets for version management:

npm run changeset       # Add a changeset
npm run version         # Update versions
npm run release         # Publish release

See CHANGELOG.md for release history.

Author

Arnold Wender

Website: arnoldwender.com
Agency: Wender Media — Web Agency, Halle (Saale), Germany
GitHub: @arnoldwender
Twitter/X: @arnoldwender
LinkedIn: arnoldwender

License

This project is licensed under the Wender Media Source License v1.0 (SPDX: LicenseRef-Wender-Media-Source-1.0).

The license is source-available proprietary with weak copyleft. In short:

Free commercial and non-commercial use, no tier limits.
You may modify, build with, and redistribute the Software.
Redistributions and Derivative Works must keep the LICENSE/NOTICE files and copyright headers, and must remain under this same License (no relicensing under MIT/Apache/BSD/etc.).
Attribution to Wender Media is recommended but not required — see below.

For the full legal text, including the patent grant, termination conditions, and definitions, read LICENSE and NOTICE.

If you need an MIT-licensed version, pin @wendermedia/[email protected] — that release stays on npm under MIT.

Attribution (Recommended)

Attribution is not required by the license, but it is appreciated. If you build with this library, consider including the badge below in your README:

[![Built with @wendermedia/astro-components](https://img.shields.io/badge/built%20with-wendermedia-blue)](https://github.com/arnoldwender/wm-project-astro-components)

Renders as:

Or simply mention "Components by Wender Media" in your project credits.

Disclaimer

If you are a racist, fascist, or extremist of any kind or have another kind of mental disability that makes you discriminate against other human beings — please don't use my software.