183 production-ready, accessible, GDPR-compliant Astro 7 components
Built by Wender Media — Web Agency from Halle (Saale), Germany
Live Playbook • Installation • Quick Start • Components • Design Tokens • Migrate from 2.x
Interactive component playbook: astro.wendermedia.com
Browse all 183 components with live previews, props, and usage examples (Storybook).
- 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/tailwindwas 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/astro-components@2.1.0 — that release stays on npm.
See docs/MIGRATION-2.x-to-3.0.md for the full upgrade guide.
- 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
- Astro 6.0 or higher
- Node.js 22.12 or higher
- TypeScript 5.x (recommended)
@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 templatesGSAP— Hero animations
npm install @wendermedia/astro-componentsMake sure your project already has Astro 6 or 7 installed:
npm install astro@^7 # or astro@^6 — the package supports bothOr install the components package directly from GitHub:
npm install git+https://github.com/arnoldwender/wm-project-astro-components.gitUpgrading from 3.x? Read docs/MIGRATION-3.x-to-4.0.md — it covers Astro 7, the
^6 || ^7peer range, and thegsapoptional peer. Coming from 2.x? See docs/MIGRATION-2.x-to-3.0.md first.
# 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| 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 |
---
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>| 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 |
---
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}
/>---
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" />---
import { Breadcrumbs } from '@wendermedia/astro-components/navigation';
---
<Breadcrumbs
items={[
{ name: 'Home', url: '/' },
{ name: 'Products', url: '/products' },
{ name: 'Headphones', url: '/products/headphones' },
]}
showSchema={true}
/>---
import { CookieConsent } from '@wendermedia/astro-components/accessibility';
---
<CookieConsent
showSettings={true}
analyticsEnabled={false}
marketingEnabled={false}
privacyUrl="/datenschutz"
position="bottom"
/>Centralized design system powered by Style Dictionary:
npm run tokens:build/* 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;
}# Unit tests
npm run test
# With coverage
npm run test:coverage
# Accessibility tests (axe-core)
npm run test:a11yimport {
runA11yAudit,
expectNoA11yViolations,
} from '@wendermedia/astro-components/testing';
describe('MyComponent', () => {
it('has no accessibility violations', async () => {
const element = document.querySelector('.my-component');
await expectNoA11yViolations(element);
});
});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 siteConnect 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.
@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
- Chrome / Edge 90+
- Firefox 90+
- Safari 14+
- iOS Safari / Chrome Android
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.
We use Changesets for version management:
npm run changeset # Add a changeset
npm run version # Update versions
npm run release # Publish releaseSee CHANGELOG.md for release history.
Arnold Wender
- Website: arnoldwender.com
- Agency: Wender Media — Web Agency, Halle (Saale), Germany
- GitHub: @arnoldwender
- Twitter/X: @arnoldwender
- LinkedIn: arnoldwender
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/astro-components@2.1.0 — that release stays on npm under MIT.
Copyright (c) 2007-2026 Arnold Wender · Wender Media. All Rights Reserved.
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:
[](https://github.com/arnoldwender/wm-project-astro-components)Renders as:
Or simply mention "Components by Wender Media" in your project credits.
Made with care by Wender Media in Halle (Saale), Germany
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.