Black-and-white retro visual style, built with Astro and TailwindCSS
AstroStarter
zaggonaut — Astro Starter Template
By RATIU5
Zaggonaut is a black-and-white retro-style theme for Astro, built with TypeScript and TailwindCSS, offering content collections, light and dark modes, and customizable color schemes.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 3
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-03View source
What stands out
A quick read of the recorded project description.
Uses Astro content collections to manage blog posts and project entries
Built-in light/dark mode toggle, with colors adjusted centrally via CSS variables
Site metadata, social links, and copy configured centrally in configuration.toml
Code written in TypeScript, with type-safe content structure
Template Details
Zaggonaut is a retro-style theme developed by RATIU5 for Astro, featuring a black-and-white color scheme and written in TypeScript and TailwindCSS. It is a starter template, suitable as a starting point for personal sites or portfolio projects.
The theme manages blog posts and project entries through Astro content collections, both as Markdown files with frontmatter. Site metadata, social links, and copy are configured centrally in content/configuration.toml. Colors are defined in src/styles/global.css using Tailwind CSS and a set of CSS variables, allowing separate adjustments to primary, muted, and accent colors in light and dark modes.
In terms of features, the theme includes a light/dark mode toggle, responsive layout, and type-safe content structure, and claims to be SEO-friendly. The README notes that currently only pnpm is supported as the package manager because npm causes peer-dependency conflicts; statements in the README about Astro versions and Lighthouse scores are project self-descriptions and have not been individually verified against the dependency list.
AstroStarter
Is it right for your project?
Use Cases
- Building a personal blog and publishing Markdown-formatted articles
- Showcasing personal projects or portfolio pages
- Using as a starter template for an Astro project for further development
- Sites that require a light/dark mode toggle and customizable color schemes
Suitable For
- Developers who prefer a black-and-white retro visual style
- Front-end developers using the Astro and TailwindCSS stack
- Personal site authors who want to manage content via Markdown and content collections
- Template users who need customizable colors and light/dark mode
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Can create a project using pnpm create astro@latest --template RATIU5/zaggonaut
- 2
The README states that currently only pnpm is supported; npm causes peer-dependency conflicts
- 3
Site configuration is located in content/configuration.toml; blogs and projects are placed in content/blogs/ and content/projects/ respectively
- 4
Colors are adjusted via CSS variables in src/styles/global.css
- 5
Third-party assets such as demo images, fonts, and icons must be checked individually under their respective licenses
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not imply that external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version's code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as-is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- The project currently only supports pnpm as the package manager because npm causes peer-dependency conflicts; using npm, yarn, or other package managers may fail to install dependencies properly.
- Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domain, hosting, database, payment, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
https://github.com/RATIU5/zaggonaut/blob/main/LICENSE.mdhttps://github.com/RATIU5/zaggonaut/blob/main/README.mdCurrently, `pnpm` is the only supported package manager due to `npm` throwing peer-dependency conflicts.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-03. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- Astro Themes
- Documentation and maintenance reference score
- More documented · 87 / 100
- Technologies
- Astro
- Website type
- Starter
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-06-22
- Screenshot last checked
- 2026-10-03
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Astro as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-04
Inspect the recorded source material
SHA-256: e43872e416dedf7d88619e20cc468bfa552529a6321b25904be08584ee40a422
2026-10-03T16:40:28.096Z
Source file / repository Zaggonaut is a retro-inspired black & white theme for Astro, built using TypeScript, TailwindCSS, and of course, Astro. > [!IMPORTANT] > Now using Astro 7! If you are looking for the original Zaggonaut theme, you can find it [on the v1 branch](https://github.com/RATIU5/zaggonaut/tree/v1). ## Getting Started [View the demo](https://zaggonaut.dev) or [view the source code](https://github.com/RATIU5/zaggonaut). Alternatively, you can create a new Astro project with Zaggonaut like this: ```bash # pnpm pnpm create astro@latest --template RATIU5/zaggonaut ``` > [!IMPORTANT] > Currently, `pnpm` is the only supported package manager due to `npm` throwing peer-dependency conflicts. ## Features - Content Collections - Dark & light mode - Customizable colors - 100 / 100 Lighthouse score - Fully accessible - Fully responsive - Type-safe - SEO-friendly ## Customization The entire theme is fully customizable. The theme is setup a specific way to make it easy to customize. ### Colors You can customize the colors of the theme by editing the `src/styles/global.css` file. This file uses Tailwind CSS and CSS variables to customize the colors of the theme. Zaggonaut uses the following CSS variables: - `--color-zag-dark`: The dark color of the theme - `--color-zag-light`: The light color of the theme - `--color-zag-dark-muted`: The dark color of the theme with a slight opacity - `--color-zag-light-muted`: The light color of the theme with a slight opacity - `--color-zag-accent-light`: The light accent color of the theme - `--color-zag-accent-light-muted`: The light accent color of the theme with a slight opacity - `--color-zag-accent-dark`: The dark accent color of the theme - `--color-zag-accent-dark-muted`: The dark accent color of the theme with a slight opacity ### Content Customization 95% of the content you'll want to customize will be located inside the `content` directory. Let's break down the specific files/directories you may want to edit: - `content/configuration.toml`: This file contains the site configuration, such as metadata, social links, and text content. - `content/blogs/`: This directory contains your blog posts. Each post is a Markdown file with metadata in the frontmatter at the top. - `content/projects/`: This directory contains your projects. Each project is a Markdown file also with metadata in the frontmatter. ## Ready To Try? Check out [the theme website](https://zaggonaut.dev) to give it a spin!
Explore similar templates
Compare previews and descriptions within the same stack and category.
astrowind
AstroWind is a free, open-source Astro starter theme using Astro and Tailwind CSS, released under the MIT license.
Astro · Blog
accessible-astro-starter
An accessibility-focused Astro 6 starter template with WCAG 2.2 AA practices, Tailwind CSS 4, TypeScript, Prettier, ESLint, form validation, blog and portfolio examples, and preference toggles for dark mode, high contrast, and reduced motion.
Astro · Blog
astro-erudite
astro-erudite is an opinionated, unstyled static blog template built with Astro and native CSS, with no UI or CSS framework and minimal dependencies.
Astro · Portfolio
astro-shopify
A lightweight Shopify headless ecommerce starter template built with Astro and Svelte, integrating the Shopify Storefront API for product and inventory data, with built-in cart state management and basic add-to-cart and checkout flow.
Astro · E-commerce
brutal
Brutal is a neobrutalism Astro starter theme from ElianCodes, derived from the author's personal site and generalized. It includes a Markdown blog collection, build-time RSS and sitemap, image optimization, Tailwind CSS styling, and Biome checks, with no JavaScript by default.
Astro · Starter
qwind
Qwind is a free and open-source website template built on Qwik and Tailwind CSS, featuring directory-based routing via QwikCity, a Markdown blog, dark mode, and static deployment configuration.
Astro · Tool Site