Astromag is a news portal and magazine website template built with Astro, Tailwind CSS 4, and Alpine.js — designed for news publishers, online magazines, editorial teams, and content creators.
Built with performance, SEO, and editorial flexibility in mind, Astromag delivers a professional digital presence that helps content teams publish fast, engage readers, and grow their audience.
Astromag Supports Astro Version 6.x.x 🎉
📰 What Makes Astromag Stand Out
- Reader-first design focused on readability, content hierarchy & engagement
- Purpose-built UI for news articles, category archives & author profiles
- MDX content system — write articles without touching layout code
- Alpine.js powered interactive components (search, mobile nav, pagination)
- Lightning-fast performance — static output via Astro with zero JavaScript overhead
- SEO-ready architecture — clean URLs, semantic HTML, meta tags & pagination
- Fully modular components — mix and match layouts for any editorial need
🎯 Design DNA
Modern Bold brand
accent, neutral grays, and clean whites — a palette that keeps reader focus on content while maintaining a strong, professional identity.
News-Grade Typography
Crisp sans-serif body text paired with strong heading weights — optimized for long-form reading, skimmability, and cross-device legibility.
Subtle Interactions
Hover transitions, marquee tickers, smooth scroll pagination, and Alpine.js-powered UI — fast feedback without distracting from the content.
Fully Responsive
Pixel-perfect layouts across desktop, tablet, and mobile. Every component adapts gracefully from 320px to 2K.
📦 Features Included
- ✅ Editorial homepage with HeroGrid, TrendingNews ticker & NewsBlock variants
- ✅ Category pages with paginated article grids (12 per page)
- ✅ Tag system with dedicated tag pages and pagination
- ✅ Author profiles with article archives and social links
- ✅ Full-text client-side search powered by Alpine.js
- ✅ Featured article badges and highlight system
- ✅ Related articles on every post page
- ✅ Social sharing (Facebook, Twitter/X, LinkedIn, WhatsApp, Copy link)
- ✅ Reading progress bar on article pages
- ✅ Newsletter widget & ad banner components
- ✅ Footer with latest news, image grid, tag cloud & social widgets
- ✅ Static page system (Privacy, Terms, Docs, About, Contact)
- ✅ SEO-friendly pagination (/category/2, /tag/keyword/2)
- ✅ Breadcrumb navigation with light/dark variants
📝 Project Folder Structure
src/ ├── components/ # Reusable UI components ├── content/ # MDX content │ ├── blog/ # Article MDX files │ └── page/ # Static pages (docs, privacy, terms, etc.) ├── data/ # Author registry (authors.ts) ├── layouts/ # Layout components (MainLayout, etc.) ├── pages/ # Astro route files └── styles/ # Global styles and Tailwind config
⚙️ Quick Setup
- Download & Open astromag project
- Run npm install
- Start dev server with npm run dev
- Customize branding, colors, and content
- Build for production with npm run build
📝 Tech Stack
- Astro 6.x Static site generator & routing
- Tailwind CSS4.x Utility-first styling
- Alpine.js3.x Reactive UI (search, nav, pagination)
- MDX—Content authoring
- astro-icon—Bootstrap Icons
- TypeScript—Type-safe
💬 Support & Updates
Astromag includes free lifetime updates for compatibility with future Astro releases and ongoing feature improvements.
🔄 Changelogs
VERSION 1.1.0 (March 2026)
Package Updated
@iconify-json/bi ^1.2.6 → ^1.2.7 @tailwindcss/vite ^4.1.13 → ^4.2.1 alpinejs ^3.14.9 → ^3.15.8 tailwindcss ^4.1.13 → ^4.2.1 astro ^5.1.7 → ^6.0.0 @astrojs/mdx ^4 → ^5
Content Config
src/content/config.ts → deleted src/content.config.ts → created with glob() type: "content" → removed z imported from astro/zod
Dynamic Routes
entry.slug → entry.id.replace(/\.mdx$/, "")
params: { slug: entry.id.replace(/\.mdx$/, "") }
Pages
entry.render() → render(entry)
Fonts API
Google Fonts `<link>` → Astro 6 built-in Fonts API.
