HERO 01
Astro component library
311 ready-made Astro components.
Production-ready heroes, features, pricing sections, navigation, testimonials and more. Copy the Astro file, paste it into your project and make it yours.
- 311 free
- Everything unlocked
- Pure .astro
- No lock-in
- AI editable
Pure
.astro filesNo extra packages neededadd HERO 08 to your AI agentEditable with AIFree updatesSelected components
Start with a proven section.
Every preview is a live render of the component—not a flattened screenshot.
FOOTER 10
PRICING 09
FEATURES 02
CARD 18
NAV 04
Step 06
TESTIMONIAL 14
Clear by design
One component. One file. No hidden runtime.
The markup, scoped CSS and optional interaction stay together. You can understand the structure, replace the copy and adjust the layout without learning a proprietary system.
- Readable component-scoped CSS
- Props for content and images
- JavaScript only when it adds value
---
interface Props {
title?: string;
description?: string;
}
const {
title = 'Build something clear.',
description = 'Edit the copy, colors and layout in one file.',
} = Astro.props;
---
<section class="hero">
<h1>{title}</h1>
<p>{description}</p>
</section>A calmer workflow
From library to live page in four steps.
Use the component as a solid starting point, then make it unmistakably yours.
- 01Choose
Open a live preview and pick the composition that fits.
- 02Write or say
add HERO 08 to your AI agent - 03Adapt
Change content, colors and spacing yourself or with AI.
- 04Ship
Build a fast page without carrying a visual builder runtime.
What you get
A designed section that becomes your code.
Choose a block, tell your AI agent what to add, and keep editing it inside your own Astro project.
| With Astroblocks | What it means for you |
|---|---|
| 311 ready-made sections | Start from a polished layout instead of a blank page. |
| One simple instruction | Write or say add HERO 08 to your AI agent. |
| A clean Astro file | The component is added directly to your own project. |
| Everything stays editable | Change the text, images, colors and layout whenever you want. |
Choose your starting point
Use the complete library for free.
Browse online or download the entire Astro project. No account, checkout or subscription.
All 311 components
$0The complete library, ready for your own sites and client projects.
- Every block unlocked
- Free future updates
- AI-ready workflow
FAQ
Useful answers before you copy.
Explore the components online first — there is nothing to install.
What are Astro components?
Astro components are reusable .astro files that combine markup, styles and optional scripts. They render to fast HTML by default and can accept props for content, images and variants.
Do these components ship JavaScript?
Only when an interaction needs it. Static sections ship as HTML and CSS, while sliders, tabs or accordions include the smallest script required for the experience.
Can I use Astroblocks in commercial projects?
Yes. The free license allows use in your own sites and client projects. You keep the code you copy and can adapt it to the project.
Are these Tailwind components?
No. Every block uses readable component-scoped CSS, so you can paste it into an Astro project without adding a utility framework.
How do I customize a component?
Edit it directly or ask Codex, Claude Code or Cursor for the change in plain language. The result stays ordinary Astro code in your repository.
Will the components work with my existing Astro site?
Yes. Copy the component file, import it on a page and pass your content as props. Because the blocks avoid hidden runtimes, they are straightforward to fit into an existing design system.
Build the next page
Start with a better Astro component.
Browse all 311 live sections, copy the right structure and keep moving.