Introducing the adaptiveX Theme for Astro
After months of development, we are thrilled to announce the release of adaptiveX – a production‑grade, fully‑typed, and internationally‑ready theme for Astro. Built with best practices at every layer, adaptiveX empowers you to create fast, accessible, and beautiful websites with ease.
Why adaptiveX?
The web is diverse – your audience speaks different languages, uses different devices, and may have accessibility needs. adaptiveX was born from the need for a theme that adapts seamlessly to all these requirements without sacrificing performance or developer experience.
Key Features
-
🌍 Internationalization (i18n) first
With built‑in support for five languages (English, Spanish, French, Portuguese, Chinese) and a flexible translation system, your content reaches a global audience. The theme leverages Astro’s file‑based routing for locales, so adding a new language is as simple as creating a folder. -
♿ Accessibility by default
Every component is built with WCAG 2.1 AA standards in mind. Semantic HTML, proper ARIA labels, keyboard navigation, and respect forprefers-reduced-motionare baked in. We believe accessibility is not an afterthought. -
🎨 Theming & dark mode
Powered by CSS custom properties, adaptiveX lets you switch between light and dark mode effortlessly. The theme includes a comprehensive color palette and spacing scale, making it easy to customize the look and feel to match your brand. -
📦 Modular component architecture
From atomic UI primitives (buttons, badges, avatars) to complex composites (article metadata, tables of contents, share buttons), everything is built to be reusable and composable. TheArticleMetacomponent, for example, can be configured to show exactly the metadata you need – dates, author, category, tags, reading time – in any order. -
⚡ Performance optimized
The theme is static‑first, with zero client‑side JavaScript by default. Interactive islands (like the mobile menu or theme toggles) are hydrated only when needed. Images are optimized using Astro’s built‑in assets, and the TOC is generated at build time.
Getting Started
To start using adaptiveX, simply clone the repository and run npm install. The theme comes with example content for a personal brand site, including a landing page, blog, and legal documents. You can customize everything from the central configuration files (src/config/).
---
// Example: Using the ArticleMeta component
import ArticleMeta from '@components/shared/article-meta/index.astro';
---
<ArticleMeta
items={['published', 'updated', 'author', 'category', 'tags']}
published={frontmatter.publishDate}
publishedLabel="Published:"
author={authorInfo}
category={frontmatter.category}
tags={frontmatter.tags}
locale={locale}
/>
What’s Next?
We are already working on additional features: a collapsible table of contents, more social sharing options, and integration with headless CMSs. The theme is open‑source, and we welcome contributions!
Stay tuned for more updates, and happy building with adaptiveX!