Ataraxia Astro Theme

Ataraxia is a clean, accessible, modern blog theme for Astro v7 that generates a static blog with dark mode, tag pages, RSS, and MDX support. It is open-sourced under the MIT License and draws design inspiration from the Astro Starter Kit: Blog and Bear Blog.

What is the Ataraxia Astro Theme?

Ataraxia is a blog theme built on Astro v7, the static site generator. It takes Markdown and MDX files from a content collection and outputs a static blog with individual post pages, tag filtering pages, an automatically generated RSS feed, and a sitemap. The theme is configured through a single TypeScript file for site title, description, and author, and uses Zod schemas to validate blog post frontmatter. It is open source under the MIT License, allowing free use for personal and commercial projects.

Key Features

Ataraxia bundles the features needed to launch a production-ready blog, including dark mode, accessibility, typography, and SEO tooling. The following list highlights the key capabilities:

• Dark mode with toggle — Automatically detects the system color scheme, includes a manual toggle that persists to localStorage, and animates color transitions with sun and moon icons.
• WCAG 2.2 AA accessibility — Provides keyboard navigation, skip links, ARIA landmarks, focus indicators, and screen reader friendly markup without additional configuration.
• Atkinson Hyperlegible fonts — Bundles variable fonts specifically designed for readability, supporting weights from 100 to 900, italic variants, and a monospace variant for code.
• Tag system — Requires at least one tag per post, generates dedicated tag pages and a tag cloud with post counts, and includes a reusable TagList component.
• Content collections with Zod validation — Type-safe blog posts with schema validation, defined in a content.config.ts file.
• SEO and metadata — Includes canonical URLs, OpenGraph data, and automatically generated sitemap via @astrojs/sitemap.
• RSS feed — Auto-generated RSS feed through @astrojs/rss, ready for subscriber delivery.
• MDX support — Allows embedding components inside markdown posts using @astrojs/mdx.
• Optimized images — Uses Sharp for image optimization in production builds.

Who is it for?

Ataraxia is for bloggers and writers who want a fast, minimal static blog without configuring SEO and accessibility from scratch. It suits developers familiar with Astro who want to customize a starter, and non-technical writers who can use the content collection workflow to publish Markdown posts. The theme also fits accessibility-minded creators who need WCAG compliance in their blog.

What can you do with it?

With Ataraxia you can spin up several types of content-focused sites directly from the starter. Here are common workflows:

• Personal bloggers: Publish a personal blog by dropping Markdown files into src/content/blog and running npm run dev to preview.
• Technical writers: Write posts with MDX and embed interactive components, while code blocks use the bundled monospace font.
• Accessibility-focused creators: Deliver a blog that meets WCAG 2.2 AA out of the box, including keyboard and screen reader support.
• Content-driven developers: Set up a minimal blog with tag pages, RSS, and sitemap in a few minutes, then adjust colors and navigation in global.css and Header.astro.

How does Ataraxia work?

Creating a blog post involves three steps: add a Markdown or MDX file to the src/content/blog folder, include frontmatter with a title, description, publication date, and at least one tag, and then preview with the Astro dev server. The file name becomes the URL slug for the post. The site configuration, including title, description, and author, lives in src/consts.ts, and the production URL is set in astro.config.mjs.

What's included in the project structure?

The template ships with a public folder for fonts and favicon, an src folder with components, content, layouts, pages, styles, and utilities. Key pages include index, about, a blog listing, dynamic post routes, and tag pages. Notable components cover base head SEO, breadcrumbs, header, footer, formatted dates, tag lists, and a theme toggle. Configuration files for Astro, TypeScript, and package dependencies are included, and styles are centralized in global.css using CSS variables.

Pricing

The theme is completely free to use. It is open source under the MIT License, so there are no fees for personal or commercial projects.

FAQ

Is Ataraxia free?

Yes, Ataraxia is free. The theme is released under the MIT License, allowing you to use, modify, and distribute it without cost.

Which Astro version does Ataraxia use?

Ataraxia is built for Astro v7, taking advantage of the latest features. If you use an older Astro version, you may need to adjust dependencies.

Does Ataraxia support dark mode?

Yes, dark mode is built in. The theme detects the system preference, offers a manual toggle with localStorage persistence, and includes smooth color transitions.

How do I create a blog post?

Add a Markdown or MDX file to src/content/blog in the project. The file must include frontmatter with a title, description, publication date, and at least one tag. The filename becomes the post's URL slug.

Does Ataraxia include an RSS feed?

Yes, an RSS feed is automatically generated using @astrojs/rss. After building the site, the feed is available at the rss.xml route.