Get started with AstroWind to create a website using Astro and Tailwind CSS
Start your web journey with AstroWind – harness Astro and Tailwind CSS for a stunning site. Explore our guide now.
AstroWind Component Showcase
Browse all available components and sections from the AstroWind template
Hero Components
Folder: src/components/widgets/
Hero
File: src/components/widgets/Hero.astro
Uses: ~/components/common/Image.astro, ~/components/ui/Button.astro
Free template for Astro 5.0 + Tailwind CSS
AstroWind: Production-ready. Suitable for Startups, Small Business, SaaS websites, Professional Portfolios, Marketing websites, Landing Pages & Blogs.
Hero2
File: src/components/widgets/Hero2.astro
Uses: ~/components/common/Image.astro, ~/components/ui/Button.astro
Alternative Hero Layout
Alternative hero layout with
different styling options
This is the Hero2 component variant, offering a different layout and styling approach for your landing pages. Perfect for creating variation across different pages.
HeroText
File: src/components/widgets/HeroText.astro
Uses: ~/components/ui/Headline.astro
Text-Only Hero
Stellar Pricing for Every Journey
Choose the perfect plan that aligns with your cosmic goals. This hero focuses on text without images.
Feature Components
Folder: src/components/widgets/
Features
File: src/components/widgets/Features.astro
Uses: ~/components/ui/ItemGrid.astro, ~/components/ui/Headline.astro
Features
What you get with AstroWind
One of the most professional and comprehensive templates currently on the market.
Astro + Tailwind CSS Integration
A seamless integration between two great frameworks that offer high productivity, performance and versatility.
Ready-to-use Components
Widgets made with Tailwind CSS 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.
Features2
File: src/components/widgets/Features2.astro
Uses: ~/components/ui/Headline.astro, ~/components/ui/ItemGrid2.astro
Components
Most used widgets
Provides frequently used components for building websites using Tailwind CSS
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!
Features3
File: src/components/widgets/Features3.astro
Uses: ~/components/ui/Headline.astro, ~/components/common/Image.astro
Our templates
Etiam scelerisque, enim eget vestibulum luctus, nibh mauris blandit nulla.
Educational
Morbi faucibus luctus quam, sit amet aliquet felis tempor id. Cras augue massa, ornare quis dignissim a.
Interior Design
Vivamus porttitor, tortor convallis aliquam pretium, turpis enim consectetur elit, vitae egestas purus erat.
Photography
Duis sed lectus in nisl vehicula porttitor eget quis odio. Aliquam erat volutpat.
E-commerce
Rutrum non odio at vehicula. Proin ipsum justo, dignissim in vehicula sit amet.
Blog
Nullam efficitur volutpat sem sed fringilla. Suspendisse et enim eu orci volutpat laoreet.
Business
Morbi et elit finibus, facilisis justo ut, pharetra ipsum. Donec efficitur, ipsum quis congue luctus.
Content Component
Folder: src/components/widgets/
Content (Image Right)
File: src/components/widgets/Content.astro
Uses: ~/components/ui/Headline.astro, ~/components/common/Image.astro
Inside template
AstroWind's Blueprint: Fun Meets Functionality!
Building on modern foundations
Gain a competitive advantage by incorporating industry leading practicesBuilt on top of Astro 5.0
Benefiting from the performance and developer-friendly features of this modern static site generator.
Styled using Tailwind CSS
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.
Content (Image Left - isAfterContent)
File: src/components/widgets/Content.astro
Props: isAfterContent=true
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.
Multiple layout possibilities
Explore various layout options to find the structure that best presents your content.
Fully responsive design
Ensure your website's optimal performance on various devices and screen sizes.
Integration of media
Seamlessly incorporate images, videos, and multimedia elements that enhance your content.
Steps Components
Folder: src/components/widgets/
Steps
File: src/components/widgets/Steps.astro
Uses: ~/components/ui/Timeline.astro, ~/components/common/Image.astro
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.
Step 2: Add content
Pour your vision into it. Add images, text, and all that jazz to breathe life into your digital space.
Step 3: Customize styles
Give it your personal touch. Tailor colors, fonts, and layouts until it feels just right.
Ready!
Steps2
File: src/components/widgets/Steps2.astro
Uses: ~/components/ui/Headline.astro
Our values
Maecenas eu tellus eget est scelerisque lacinia et a diam. Aliquam velit lorem, vehicula id fermentum et, rhoncus et purus.
- 1
Customer-centric approach
Donec id nibh neque. Quisque et fermentum tortor. Fusce vitae dolor a mauris dignissim commodo.
- 2
Constant Improvement
Phasellus laoreet fermentum venenatis. Vivamus dapibus pulvinar arcu eget mattis.
- 3
Ethical Practices
Vestibulum imperdiet libero et lectus molestie, et maximus augue porta.
Steps2 (Reversed with Icons)
File: src/components/widgets/Steps2.astro
Props: isReversed=true
Achievements
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis.
Global reach
Nam malesuada urna in enim imperdiet tincidunt. Phasellus non tincidunt nisi.
Positive customer feedback
Cras semper nulla leo, eget laoreet erat cursus sed. Praesent faucibus massa.
Awards and recognition
Phasellus lacinia cursus velit, eu malesuada magna pretium eu.
Other Major Widgets
Folder: src/components/widgets/
Announcement
File: src/components/widgets/Announcement.astro
No child components
Note
File: src/components/widgets/Note.astro
Uses: ~/components/ui/Headline.astro
Philosophy: Simplicity, Best Practices and High Performance
Brands
File: src/components/widgets/Brands.astro
Uses: ~/components/common/Image.astro, ~/components/ui/Headline.astro
Trusted by leading brands
Join the companies that choose our platform
Stats
File: src/components/widgets/Stats.astro
Uses: ~/components/ui/WidgetWrapper.astro
Statistics about us
132K
Downloads
24.8K
Stars
10.3K
Forks
48.4K
Users
Pricing
File: src/components/widgets/Pricing.astro
Uses: ~/components/ui/Headline.astro, ~/components/ui/Button.astro
Our prices
Only pay for what you need
basic
Optimal choice for personal use
$ 29
per month- Etiam in libero
- Aenean ac nunc dolor
- Cras scelerisque accumsan
popular
standard
Optimal choice for small teams
$ 69
Per Month- Proin vel laoreet
- Ut efficitur habitasse
- Volutpat hac curabitur
- Pellentesque blandit
premium
Optimal choice for companies
$ 199
Per Month- Curabitur suscipit risus
- Aliquam habitasse
- Suspendisse sit amet
Testimonials
File: src/components/widgets/Testimonials.astro
Uses: ~/components/ui/Headline.astro, ~/components/common/Image.astro
Words from real customers
" The designs are not only visually appealing but also highly professional. The templates have saved me a significant amount of time. "
Emily Kennedy
Front-end developer
" It beautifully showcases my work, with its clean and elegant design that lets my photographs shine. "
Sarah Hansen
Photographer
" I discovered these templates and I'm impressed by their variety and quality. "
Mark Wilkinson
Small business owner
FAQs
File: src/components/widgets/FAQs.astro
Uses: ~/components/ui/Headline.astro
FAQs
Frequently Asked Questions
Dive into the following questions to gain insights into the powerful features.
Why AstroWind?
Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless in a world of criminals who operate above the law.
What do I need to start?
Space, the final frontier. These are the voyages of the Starship Enterprise.
How to install the Astro + Tailwind CSS template?
Well, the way they make shows is, they make one show. That show's called a pilot.
What's something that you don't understand?
A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear.
Contact
File: src/components/widgets/Contact.astro
Uses: ~/components/ui/Form.astro, ~/components/ui/Headline.astro
Get in touch
We'd love to hear from you. Fill out the form below and we'll get back to you as soon as possible.
CallToAction
File: src/components/widgets/CallToAction.astro
Uses: ~/components/ui/Button.astro
Astro +
Tailwind CSS
Be very surprised by these huge fake numbers you are seeing on this page.Don't waste more time!
Blog Widgets
Folder: src/components/widgets/
BlogLatestPosts
File: src/components/widgets/BlogLatestPosts.astro
Uses: ~/components/blog/Grid.astro, ~/components/blog/Headline.astro
Find out more content in our Blog
View all posts »The blog is used to display AstroWind documentation. Each new article will be an important step that you will need to know to be an expert in creating a website using Astro + Tailwind CSS. Astro is a very interesting technology. Thanks.
Useful tools and resources to create a professional website
Explore vital tools and resources for a sleek website. From design to functionality, our guide elevates your online presence.
How to customize AstroWind template to suit your branding
Personalize AstroWind template for your brand. Our guide unlocks seamless customization steps for a unique online presence.
AstroWind template in depth
While easy to get started, Astrowind is quite complex internally. This page provides documentation on some of the more intricate parts.
BlogHighlightedPosts
File: src/components/widgets/BlogHighlightedPosts.astro
Uses: ~/components/blog/Grid.astro, ~/components/blog/Headline.astro
Highlighted Posts
View all posts »Featured articles and tutorials to help you get started with AstroWind.
UI Components
Folder: src/components/ui/
Available UI Components:
Background
ui/Background.astro
Button
ui/Button.astro
DListItem
ui/DListItem.astro
Form
ui/Form.astro
Headline
ui/Headline.astro
ItemGrid
ui/ItemGrid.astro
ItemGrid2
ui/ItemGrid2.astro
Timeline
ui/Timeline.astro
WidgetWrapper
ui/WidgetWrapper.astro
These UI components are used internally by the widget components above. They provide reusable building blocks for buttons, forms, grids, timelines, and other interface elements.
Blog Detail Components
Folder: src/components/blog/
Available Blog Components:
Grid
blog/Grid.astro
GridItem
blog/GridItem.astro
Headline
blog/Headline.astro
List
blog/List.astro
ListItem
blog/ListItem.astro
Pagination
blog/Pagination.astro
RelatedPosts
blog/RelatedPosts.astro
SinglePost
blog/SinglePost.astro
Tags
blog/Tags.astro
ToBlogLink
blog/ToBlogLink.astro
These components are used for blog post listings, individual post pages, pagination, tags, and related content. Visit the /blog section to see them in action.
Common Components
Folder: src/components/common/
Available Common Components:
Image
common/Image.astro
ToggleMenu
common/ToggleMenu.astro
ToggleTheme
common/ToggleTheme.astro
SocialShare
common/SocialShare.astro
Analytics
common/Analytics.astro
Metadata
common/Metadata.astro
These components provide common functionality like image optimization, theme toggling, social sharing, analytics integration, and SEO metadata.
Layout Components
Folder: src/layouts/
Available Layout Components:
Layout
layouts/Layout.astro
Base layout with HTML structure, metadata, and scripts
PageLayout
layouts/PageLayout.astro
Layout for standard pages with header and footer
LandingLayout
layouts/LandingLayout.astro
Layout optimized for landing pages
MarkdownLayout
layouts/MarkdownLayout.astro
Layout for markdown/blog content with typography styling
These layouts wrap your page content and provide consistent structure, navigation, and styling. This showcase page uses PageLayout.