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.
📰 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
📝 Built-in Content System (MDX)
Manage all content without touching layout code:
src/
├── content/
│ ├── blog/ # Article MDX files
│ │ └── article-slug.mdx
│ └── page/ # Static pages (docs, privacy, terms, etc.)
│ └── documentation.mdx
└── data/
└── authors.ts # Centralized author registry
⚙️ Quick Setup
- Download & Extract template files
- Run npm install to install dependencies
- Start dev server with npm run dev
- Customize branding, colors, and content
- Build for production with npm run build
📝 Tech Stack
- Astro5.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.
