DEV Community

Cover image for Astro Framework - Resources & Free Starters

Posted on • Originally published at

Astro Framework - Resources & Free Starters

Hello Coders!

This article aims to provide a few useful resources for Astro, a web framework that can be used to code static websites, eCommerce Platforms, Documentation portals, and much more using some innovative concepts like islands on top of any UI Framework like React, Vue, Svelte.

Thanks for reading!

Why Astro?

Astro, initially started as an SSG (Static Site Generator) rapidly evolved into a modern and innovative web framework that tries to find a balance between loading and execution speed for a website and the amount of the JS loaded and used on the client side.

Unlike some other frameworks, Astro is HTML-first, which means it outputs zero JavaScript by default and supports both static site generation (SSG) and server-side rendering(SSR).

Here are the Key Points of Astro:

✅ Astro Islands

This is probably the most important innovation of Astro that allows the creation of interactive UI components within an otherwise static HTML page. Each island, as the name suggests, runs isolated and interactive while the rest of the page remains static.

Image Credits: Semaphore - AstroJS Intro

Astro - Islands Pattern

✅ Performance

Astro is statically by default, server-side rendered, and with ZERO-javascript when possible, making it a competitive tool for content-first, SEO-friendly products like landing pages, blogs, or eCommerce sites.

✅ Flexibility

Astro allows the use of components from different frameworks like Svelte, SolidJS, React, and Vue, within the same project. This aspect is a big differentiator compared to NextJs, Nuxt that force the developer to use React, and Vue across the entire project.

✅ Simple Templating

Its templating engine works with Markdown, MDX and is closer to an intuitive format easy to digest by any developer (even by beginners).

✅ Data & API Integration

Astro.js supports fetching data from APIs and also using static data sources from a local directory.

✅ Ecosystem

Astro.js has an active developer community, with more related content and use -cases published on different platforms like, Medium, and Hashnode.

If the above arguments are not enough to take a look at this new framework, here are some links that explain more technical how AstroJS is built:

Astro Starters (all free)

Once the basics are assimilated, we can move forward and play around with a few starters (all free).

AstroLaunch UI

With AstroLaunch UI, you gain access to a free collection of fully coded elements, example pages, and blocks. Whether you're a startup, working on a landing page, or managing a blog, our Astro template has got you covered - Developed by Creative-Tim.

AstroLaunch UI - by Creative-Tim

Flowbite Astro Dashboard

A free and open-source admin dashboard template built by the core Flowbite team that gives you access to UI components like charts, widgets, tables, and CRUD layouts based on the Flowbite design system.

Flowbite Dashboard - Open-source Astro Starter

Astro eCommerce

Astro Ecommerce is a stunning starter template for E-commerce projects based on Astro's next-gen island architecture. Whether you're launching a new online store or looking to upgrade your existing one, Astro Ecommerce theme provides everything you need to create a stunning, user-friendly shopping experience for your customers.

👉 Astro eCommerce - product page

Astro eCommerce - by Creative Tim


Astroplate is a comprehensive starter template built using modern web technologies such as Astro, TailwindCSS, and TypeScript. It provides developers with a solid foundation for building fast and content-focused websites quickly and efficiently with the Astro framework. Use Astroplate for your next Astro project and save valuable time.

Astroplate - Open-source Astro Starter


AstroWind is a free, customizable, and production-ready template for Astro 3.0 + Tailwind CSS. Suitable for Startups, Small Businesses, SaaS websites, Professional Portfolios, Marketing websites, Landing Pages, and blogs.

AstroWind - Open-source Astro Starter


Sendit is a polished and versatile marketing website template for Astro, optimized for visual editing on CloudCannon.

Sendit - Open-source Astro Starter


A simple agency landing page made with AstroJS and TailwindCSS.

AgenceX - Open-source Astro Starter


Modern Sass home page template that supports light and a dark theme built with TailwindCSS using Tailus blocks.

Astrolus - Open-source Astro Starter

Thanks for reading! For more information, feel free to access:

  • 👉 Astro, official DOCS
  • 👉 What is Astro, a comprehensive introduction provided by Contentful

Astro - The Official Cover

Top comments (12)

dumebii profile image
Dumebi Okolo

I've been looking to learn something new. Perhaps I'd give Astro a try!

nlxdodge profile image

I re-wrote my static portfolio in Astro instead of Nuxt (because a lot of static things where still not done yet at that time in nuxt).

And I can say that I am not going back to Nuxt anytime soon.
Also upgrading from 2.X.X to version 3.0.0 was just updating a couple module versions and re-running the build. No issues there.

sm0ke profile image

Hello @nlxdodge

Feel free to share the project, if you want.
Can you tell if the project was done 100% with Astro? [ no react, vue, .. etc]

Ty for stopping by.

Thread Thread
nlxdodge profile image

Sure, I can share my project 😉
Here is the Github Repo

Thread Thread
sm0ke profile image

You got a (*) .. Thanks for sharing!

Thread Thread
nlxdodge profile image

I mostly used Vanilla JavaScript with some plugins, but I want to clean up some stuff to make the overall template and (s)css a bit smaller.

Thread Thread
sm0ke profile image

Once updated, feel free to share the new features on this thread.

sm0ke profile image

cool :)

oggo profile image

Nice article! The link of the astro e-commerce ( is broken. I got 404 :-(

sm0ke profile image

Hello @oggo

Thank you for the notice. I will ping out the CT team.


krolageek profile image
krola91 • Edited

Hi, I'm a Astro newbie. How can I deploy my Astro web in a cpanel?
By the way, thanks for your article, it was helpful.

sm0ke profile image

Ty @krolageek for stopping by.

Not sure how this can automate the cPanel deployment, but you can try to upload the production build.

If you have the time, please reply here with a status.