Astro-nomy is an open-source example application built with Astro v4 and shadcn/ui that demonstrates how a modern web app — with MDX content, API endpoints, and React-powered UI — can be assembled using Astro's latest features.
What is Astro-nomy?
Astro-nomy is an open-source example app created by developer @miickasmt, built on Astro v4.5 with shadcn/ui, React, Tailwind CSS, and TypeScript. It takes an Astro project structure and produces a working application with routing, layouts, content collections, API endpoints, and UI components. The project is a work in progress, explicitly not yet a starter template, and is based on shadcn's Taxonomy example app.
Key Features
- MDX Content Collections — Blog and documentation content are authored in MDX and managed through Astro Content Collections.
- shadcn/ui Components — Reusable UI components built with shadcn/ui, styled with Tailwind CSS.
- Routing and Layouts — Astro's file-based routing with shared layouts and View Transitions support.
- React Components & Hooks — Built-in React components and custom hooks are integrated for interactive parts.
- Validation with Zod — Form and data validations are implemented using Zod schemas.
- RSS & Sitemap — Built-in support for generating RSS feeds and sitemaps.
- API Endpoint & Data Fetching — Server-side API routes and data fetching are included out of the box.
- 100/100 Lighthouse — The application achieves a perfect Lighthouse performance score.
- Dark Mode — Dark mode support is implemented.
- TypeScript & pnpm — Written in TypeScript and managed with pnpm for package management.
Who is it for?
- Developers learning Astro — Use it as a reference to see how Astro v4 handles routing, content collections, and API endpoints.
- UI developers — Explore how shadcn/ui components are integrated with Tailwind CSS and React inside an Astro project.
- Web app builders — Prototype features like changelog pages, waitlists with React Hook Form, and newsletter signups with Simple Form.
- Open-source contributors — Contribute to a living example that tracks Astro's evolving best practices.
What can you do with Astro-nomy?
- Create a blog or documentation site — Use the MDX Content Collections to organize posts and docs with built-in RSS and sitemap.
- Build a changelog page — Publish release notes and updates using the completed changelog feature.
- Add a waitlist or newsletter — Use the provided React Hook Form waitlist and Simple Form newsletter implementations.
- Fetch and display external data — Use the data fetching patterns shown in the animes pages, which pull data via GraphQL.
How does it work?
Clone the repository, install dependencies with pnpm install, and start the development server with pnpm run dev. The project uses standard Astro configuration with astro.config.mjs, tailwind.config.cjs, and TypeScript.
Pros and cons
- Pros: MIT license; 100/100 Lighthouse score; TypeScript everywhere; Tailwind for styling; built on shadcn/ui; includes RSS, sitemap, API routes.
- Cons: Not yet a starter template — work in progress; SEO component, auth/dashboard pages, ecommerce pages, and search are not implemented yet; subscriptions are planned but not active.
FAQ
Is Astro-nomy a starter template?
Not yet. The author states that the app is still under development and cannot yet be considered a starter template. It is being built in public, and the roadmap shows several features still in progress.
What is Astro-nomy built with?
Astro v4.5, shadcn/ui, React, Tailwind CSS, and TypeScript. It also uses Zod for validation, MDX for content, and follows shadcn's Taxonomy as the base design.
Does Astro-nomy include authentication?
No. Auth and dashboard pages are listed on the roadmap as an in-progress item, along with Stripe or Lemon Squeezy subscriptions.
How do I run Astro-nomy locally?
Install dependencies with pnpm install, then start the dev server with pnpm run dev.
What license does Astro-nomy use?
It is licensed under the MIT license.
