Awesome Astro

Curated resources on building sites with Astro, a brand new way to build static and server rendered sites, with cross-framework components, styling and reactive store support. If you appreciate the content 📖, support projects visibility, give 👍| ⭐| 👏.

Astro is super duper new, improving, and becoming more expressive + powerful, but few of the APIs are still evolving. This page aspires to collect all the valauble references out there, and be a useful go-to resource when astro hits it's first stable version.

Official Docs | Launch a new project , or use Code Sandbox

✍️ Blogs

Look for NEW against the post titles to find the blogs published after Astro 1.0

• Introducing Astro: Ship Less JavaScript - Fred K. Schott
• A Look at Building with Astro - Chris Coyier
• Thoughts on Astro - Chris Coyier
• Our experience with Astro - Georges
• Astro with Netlify CMS, Forestry CMS(re-visited), and Snipcart - Navillus
• How to Use Astro to Build React Apps without JavaScript - Colby Fayock
• Build wicked fast sites with Astro: An Introduction - Cassidy Williams
• A first look at Astro, astronomical results
• Why Astro matters
• SvelteKit to Astro
• Getting Started With Astro — The Innovative Static Site Generator
• Astro Will Become Your Favorite Static Site Generator
• Build a Recipe collection website with Astro - Parts → 1 - 2 - 3 - 4 - 5
• Astro: Build faster apps with less JavaScript
• Series - Learn Astro while building Ink - Get Up & Running
• Series - Learn Astro while building Ink - Astro and Site Structure
• Series - Learn Astro while building Ink - Astro and Data
• Series - Learn Astro while building Ink - Astro and Interactivity
• Series - Learn Astro while building Ink - Astro and Dynamic Pages
• Getting started with Astro
• Migrating from SvelteKit to Astro
• Personal website with Astro, Tailwind CSS, and Nx
• Astro on Cloudflare Workers
• The case about Astro
• Explore the Benefits of Astro.js by Building a Quick App NEW
• Experiments with Astro and the Shared Element Transition API NEW
• Building serverless applications with Fauna + GraphQL + Astro NEW
• Learn how to install Astro with Tailwind CSS and Flowbite NEW
• Automatic article suggestions in Astro NEW
• Learn Astro by creating your web portfolio (Spanish) NEW
• Animated SVGs - The Ultimate Web Format NEW
• An introduction to Astro's content system NEW
• How to Implement RBAC (Role-Based Access Control) in Astro Framework NEW
• How to use Goodreads data in Astro NEW
• Set up FlyonUI with Astro using Tailwind CSS

📹 Videos/Screencasts/Twitch

• Astro just Launched.... Could it be the ultimate web framework?
• Brad Traversy's Astro Crash Course
• What’s New in Astro v1?
• I Try Astro For the First Time!
• Astro and Svelte
• Modern Websites with CSS Cascade Layers and Astro
• The Next Wave of Web Frameworks is BYOJS
• Taking Astro for a ride - portfolio edition

Pre 1.0

• Ship Less JavaScript with Astro - Fredd K. Schott & Jason Lengstorf
• Speakeasy JS – Astro: A New Architecture for the Modern Web - Fred K. Schott (YouTube - Speakeasy JS)
• Astro in 100 Seconds - Jeff Delaney (Fireship)
• Yapping About Astro - Chris Coyier (CSS Tricks)
• Astro FTW! Vue and React can work together in the same app - Jamstack Fridays
• Learning Astro with Nate Moore - Nate Moore (YouTube - React Wednesdays)
• Ship less JS with Astro - Jamstack Training
• Create template layouts for your HTML with Astro SSG - Kevin Powell
• Build faster websites with Astro
• Add comments with Airtable and Netlify
• Grow Community Through Open Source | Fred K. Schott of Astro| The Secret Sauce

🧶 Condensed Thought-pieces (Twitter Threads)

• Georges on Astro as a meta web framework
• Nate Moore on Incremental Framework adoption, Solid.js support, and a future without import React from 'react' for components.
• Matthew Phillips on Astro for Web Components, lit and server-rendered custom elements
• Matthew Phillips on Astro Loading
• Nate Moore on baseline JS bundle size
• Build a landing page in 30 seconds
• Client-side routing experience with Shared Element Transitions API

ℹ️ Repositories/Starter Kits/Components

• Astro-react-vue-demo
• Astro-netlify-starter
• Astro Ink - Crisp, minimal, personal blog theme for Astro
• Astro Me - Crisp, minimal, personal portfolio theme for Astro
• Astro Starter Kit
• Astro Static Tweet
• Astro Translation Example
• Astro Ghost CMS Starter - A Ghost CMS starter for Astro
• Astro Theme - Creek - A Blog theme for Astro
• Astro Theme - Odessey - A marketing website theme built with Astro and carefully crafted for startups and businesses
• Astro Theme - Sarissa Blog - A responsive blog theme for Astro
• Astro Theme - Cactus - Simple, opinionated starter built with the Astro framework for blog or website
• Astro Theme - AstroWind - Started template to make a website using Astro and Tailwind CSS.
• Astro Theme - Bigspring Light Astro - Astro Business theme using Astro and Tailwind CSS.
• Astro TAP Stack - Opinionated astro starter kit (Typescript & Tailwind + Astro + Prisma & Planet scale)
• Astro Deno Starter
• Astro + Craft CMS Starter - A minimal, production-ready starter for Astro and Craft CMS with GraphQL integration, pagination, and live preview support
• Astro + Supabase + Vercel
• Astro + Snipcart
• Astro-MFE-Demo - Showcasing how to set up a microfrontend running on Astro.
• Refo - A static site and resume example with styled components.
• Astro Blog Starter with Netlify CMS - Template based on the Astro blog starter kit + Astro Netlify CMS integration.
• Catonaut - Browser extension template using Astro and Bun.
• Astro Saas - SaaS website tempalte built with Astro and Tailwind CSS.
• AstroMax - Brutalist landing page tempalte built with Astro and Tailwind CSS.
• SwissFolio - A Swiss style landing page template for personal use built with Astro and Tailwind CSS.
• Minimal Studio - An minimal landing page template for agencies, studios or freelancers built with Astro and Tailwind CSS.
• Gurido A super cool, playfull and modern landing page template for agencies, studios or freelancers built with Astro and Tailwind CSS.
• MicroBlog - An elegant blog website template built with Astro, Tailwind CSS and MDX.
• Quick Store - A minimal dark theme landing page to sell digital products.
• Astro Citrus - A modern Astro blog theme with MDX and Tailwind CSS
• Starwind UI - A set of powerful, accessible components for your Astro projects. Styled with Tailwind CSS v4.
• WebcoreUI - Configurable and themeable Astro component UI library

Astro Packages/Libraries

• Astro SEO - Better SEO with Astro
• Astro Stylesheet Component - Abstract the monotony of adding stylesheets to any Astro project
• Astro Command - Statically render commands and build components in any language
• Astro Pandoc - Pandoc rendering for Astro
• Astro SPA - The SPA library for Astro that will turn your website into a Single Page Application
• Astro Icon - Straight-forward Icon component for Astro
• Astro ImageTools - Image Optimization tools for the Astro JS framework
• Accessible Astro Components
• Astro Eleventy Image
• Astro Forms - Forms in Astro made easy
• Astro Auto-import - Auto-import components in Astro projects
• Astro Collection - An Astro components and configurations collection
• Astro Link - Detects external / anchor / same domain / mail / telephone href, and apply optimizations accordingly
• Sarissa Pagination - Add page number buttons for pagination. Automatically add and disable numbers as current page number.
• Astro Google Fonts Optimizer - An Astro integration to optimize the Google Fonts loading performance
• Astro SEO Meta - Astro component to add tags that are relevant for search engine optimization (SEO) to your pages.
• Astro Heroicons - Heroicons as Astro components
• Astroad - A pre-configured setup for easy website development with Astro and Payload CMS using Docker.
• Astro Social Share - Social media share buttons for your Astro site
• Astro Gist - Astro component to easily add GitHub gists to your blog
• Astro Breadcrumbs - Well configurable breadcrumb component for Astro. Create breadcrumbs completely dynamically or specify exactly how they should look.
• astro-loader-goodreads - Load Goodreads data for books in shelves/lists, user updates, and author blogs into Astro.

Astro Integrations

• Astro Content - A text based, structured content manager, for edition and consumption — AstroJS Integration
• @storyblok/astro - Astro module for the Storyblok, Headless CMS
• @unocss/astro - The UnoCSS integration for Astro
• @yeskunall/umami - Add Umami Analytics to your website
• Google Font Optimizer - An Astro integration to optimize the Google Fonts loading performance
• Astro Firebase - Deploy your server-side rendered (SSR) Astro app to Firebase
• Astro Font Picker - A Dev Toolbar Integration that lets you try out different fonts on your website
• Astro Snapshot - An Astro integration for generating screenshots of your pages automatically at build time
• ParaglideJS - A tiny, type-safe i18n integration that only ships messages used on islands to the client.
• astro-cloudflare-pages-headers - A lightweight integration for Astro that automatically generates a Cloudflare Pages _headers file for deployments based on your server header configuration.

Built with Astro

• https://astro.build/showcase/ (Official Showcase Directory)
• Designcember
• Serverless(CSS Tricks)
• Trivago - Tech Blog
• Rokt
• Backlight
• Apparently.cz
• Replicant.band
• animerdesateliers.com
• reindeere.ca
• Opensauced
• T3 Tools
• Easybank Landing Page(source)
• Humnutrition
• leosvel.dev
• eriksolsen.com
• hexarolls.com
• jadezak.com
• Overlayed
• okikio.dev
• bowling-reference.com
• component-party.dev
• linkhub.online (Source)
• firefla.me
• jmae.xyz
• meteor10
• Astro Hackathon Showcase
• andri.dk/
• alchemycodelab.com
• petar.radojevic.rs
• coolify.io
• zapp.run
• openspartan.com/
• aidankinzett.com (Source)
• ukuvota.world (Source)
• Oengi.com
• running.supply
• brylie.online
• sadman.ca (Source)
• Matrix Digital Rain Online with Terminal
• Tally (Source)
• Goldplated Photos - Self-hosted photo gallery with file-based storage, password protection, and PhotoSwipe lightbox (Source)