Free & open source

Free template for Astro v7 + Tailwind CSS

AstroWind: Production-ready.Suitable for Startups, Small Business, SaaS websites, Professional Portfolios, Marketing websites, Landing Pages & Blogs.

Get template
Learn more
AstroWind Hero Image

TL;DR

One command. That is the whole setup.

For the people who scroll past the features and ask “how do I run it?”. This is how.

Terminal
$ npm create astro@latest -- --template arthelokyo/astrowind

  • Two minutes, one terminal

    Answer the prompts, run npm run dev, open localhost:4321. The demo site is now yours to edit. The only requirement is a current Node.js.

  • AI-ready out of the box

    An AGENTS.md and step-by-step skills tell Claude Code, Cursor or any coding assistant how this template works. Ask it for a page; it knows where things go.

  • Free, MIT licensed, no strings

    Use it for client work, side projects or the company site. Star the repo if it saves you an afternoon.

Features

What you get with AstroWind

One of the most professional and comprehensive templates currently on the market. Most starred & forked Astro theme in 2022, 2023, 2024 and 2025.

Astro + Tailwind CSS Integration

A seamless integration between two great frameworks that offer high productivity, performance and versatility. Now powered by Tailwind CSS v4.

Ready-to-use Components

Widgets made with Tailwind CSS v4 ready to be used in Marketing Websites, SaaS, Blogs, Personal Profiles, Small Business...

Best Practices

Creating secure, efficient, and user-friendly websites that deliver exceptional experiences and lasting value.

Excellent Page Speed

Having a good page speed impacts organic search ranking, improves user experience (UI/UX) and increase conversion rates.

Search Engine Optimization (SEO)

SEO lies in its ability to enhance a website's visibility, driving organic traffic and enabling it to reach a wider audience.

Open to new ideas and contributions

Embracing a culture that is open to new ideas and contributions is integral fostering innovation, collaboration, and a dynamic user experience.

Inside template

AstroWind's Blueprint: Fun Meets Functionality!

Building on modern foundations

Gain a competitive advantage by incorporating industry leading practices

Built on top of Astro v7

Benefiting from the performance and developer-friendly features of this modern static site generator.

Styled using Tailwind CSS v4

Facilitating rapid design and consistent styling with this highly popular utility-first CSS framework.

Cross-browser compatibility

Ensure your website looks and functions consistently across various web browsers, delivering a seamless experience to all users.

Colorful Image
Ensure your online presence truly represents you.

High level of customization

Tailor the template effortlessly to match your brand's identity and requirements, making your website distinct and saving you time.

Multiple layout possibilities

Explore various layout options to find the structure that best presents your content, enhancing user engagement and navigation.

Fully responsive design

Ensure your website's optimal performance on various devices and screen sizes, providing a consistent and enjoyable user experience.

Integration of media

Seamlessly incorporate images, videos, and multimedia elements that enhance your content and engage visitors effectively.

Printed website wireframes on a black table
Designed to foster growth and success.

Enhanced user engagement

Captivate your audience with interactive elements, intuitive navigation, and visually appealing layouts, encouraging longer visits.

Continuous improvement

Ensure your website stays aligned with the latest trends and technologies through regular updates and enhancements.

Time and resource efficiency

Skip the time-consuming process of building a website from scratch and launch your online presence sooner with AstroWind.

Community support

Join the growing AstroWind community for insights, resources, and assistance, ensuring you're never alone on your web development journey.

Astronauts Image

Get your dream website up and running in no time with AstroWind.

Step 1: Download

Kickstart with GitHub! Either fork the AstroWind template or simply click 'Use this template'. Your canvas awaits, ready for your digital masterpiece. In just a few clicks, you've already set the foundation.

Step 2: Add content

Pour your vision into it. Add images, text, and all that jazz to breathe life into your digital space. Remember, it's the content that tells your story, so make it captivating.

Step 3: Customize styles

Give it your personal touch. Tailor colors, fonts, and layouts until it feels just right. Your unique flair, amplified by AstroWind! Precision in design ensures a seamless user experience.

Ready!

Steps image

Components

Most used widgets

Provides frequently used components for building websites using Tailwind CSS v4

Headers

Ever tried driving without GPS? Boom! That's why websites need headers for direction.

Heros

Picture a superhero landing – epic, right? That's the job of a Hero section, making grand entrances!

Features

Where websites strut their stuff and show off superpowers. No holding back on the bragging rights here!

Content

Dive into the meat and potatoes of a site; without it, you'd just be window shopping. Content is king.

Call-to-Action

That enthusiastic friend who's always urging, "Do it! Do it!"? Yeah, that's this button nudging you towards adventure.

Pricing

Behold the dessert menu of the website world. Tempting choices await, can you resist?

Testimonial

Step into the gossip corner! Here, other visitors spill the beans and share the juicy details.

Contact

Like a digital mailbox, but faster! Drop a line, ask a question, or send a virtual high-five. Ding! Message in.

Footers

The footer's like the credits of a movie but sprinkled with easter eggs. Time to hunt!

Our story

One template, since 2022

Started before Astro 1.0 shipped, shaped by every Astro release since, and by the people who kept sending pull requests.

  1. A template for a framework still in beta

    AstroWind starts on Astro 1.0 beta with a handful of pages, a few widgets and one idea: a website can be fast, simple and good-looking at the same time.

  2. The most starred Astro theme, in its first year

    By December it is the most starred theme in the Astro ecosystem, a place it would hold year after year. The first pull requests from strangers arrive, and they keep coming.

  3. The busiest stretch

    Astro grows fast and the template grows with it: collections for content, better images, page transitions. The blog matures, the widgets double, the road to 1.0 begins, and more people than ever send pull requests.

  4. Polish

    Astro 4, and a year of small, careful improvements, most of them sent in by contributors: accessibility, tooling, ways to edit and ways to deploy. Three thousand stars by September.

  5. Steady, and quieter

    Astro 5 and regular updates. Fewer commits, nothing broken, and the stars kept coming: five thousand by October.

  6. Astro 7 and Tailwind CSS 4

    Two framework majors in one year. The template gets a new generation of widgets, complete landing pages, a blog that finally reads like documentation, and a guide so coding assistants know their way around.

  7. Release v1

    Four years after the first commit, the demo has no placeholders left: every page, every landing page and every post is real, and the template is ready for whatever comes next.

Philosophy:Simplicity, Best Practices and High Performance

FAQs

Frequently Asked Questions

The questions people ask before they clone the repository, answered briefly. For step-by-step tasks, the repository ships skills your AI coding assistant can follow.

What is AstroWind?

A free, open-source template for Astro and Tailwind CSS: a static site with a header, footer, twenty-plus reusable widgets, a Markdown/MDX blog, dark mode, RTL support, image optimisation, SEO metadata and an RSS feed, ready to be customised and deployed anywhere static files are served.

What do I need to start?

A current Node.js (the exact minimum is in package.json) and a terminal. Run npm create astro@latest -- --template arthelokyo/astrowind, then npm run dev. Site name, URL, metadata and blog options live in src/config.yaml; colours and fonts in src/components/CustomStyles.astro.

Can I use it for a site without a blog?

Yes. Set apps.blog.isEnabled: false in src/config.yaml and the blog routes, the RSS feed and the post widgets disappear from the build. The rest of the template is unaffected.

How do I change colours, fonts and the logo?

Colours are CSS variables in src/components/CustomStyles.astro (light and dark), fonts are configured in astro.config.ts through Astro’s Fonts API, and the logo is src/components/Logo.astro. The same variables also feed the shadcn/ui-compatible tokens, so shadcn-style components pick up your theme.

Does it work with an AI coding assistant?

It is built for it. The repository includes AGENTS.md with the project conventions and a .agents/skills/ folder with step-by-step guides for common tasks (disable the blog, set an Open Graph image, deploy under a base path, connect a CMS, deploy to Cloudflare…), so tools like Claude Code, Codex or Cursor can do them reliably.

Where can I deploy it and what does it cost?

Anywhere that serves static files: Vercel, Netlify, Cloudflare, GitHub Pages, an nginx container (a Dockerfile is included) or your own server. The template is MIT licensed and free for personal and commercial projects.

6K
GitHub stars
1.7K
Forks
34
Ready-made widgets
100
Lighthouse score

Astro + 
Tailwind CSS

Free, open source and production-ready.Clone it, replace the content and deploy.

Get template