astroblocksGet it on GitHub
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.

Browse all 311 componentsGet Pro — $69
  • 30 free
  • 281 premium
  • Pure .astro
  • No lock-in
  • AI editable
Pure .astro filesNo extra packages neededadd HERO 08 to your AI agentEditable with AIFree updates
Selected components

Start with a proven section.

Every preview is a live render of the component—not a flattened screenshot.

HERO 01
Premium
FOOTER 10
Unlock $69

Already bought? Say add FOOTER 10 to your AI agent

Premium
PRICING 09
Unlock $69

Already bought? Say add PRICING 09 to your AI agent

Premium
FEATURES 02
Unlock $69

Already bought? Say add FEATURES 02 to your AI agent

Premium
CARD 18
Unlock $69

Already bought? Say add CARD 18 to your AI agent

Premium
NAV 04
Unlock $69

Already bought? Say add NAV 04 to your AI agent

Premium
Step 06
Unlock $69

Already bought? Say add Step 06 to your AI agent

Premium
TESTIMONIAL 14
Unlock $69

Already bought? Say add TESTIMONIAL 14 to your AI agent

Explore the complete library
Browse by category

The section you need, already shaped.

Move from the first screen to the final CTA without rebuilding familiar patterns.

Hero19Features83Card26Nav18Pricing09Testimonial14Tabs09Step06FAQ08Footer10Blog12Contact10
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
Hero.astro
---
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.

  1. 01Choose

    Open a live preview and pick the composition that fits.

  2. 02Write or say

    add HERO 08 to your AI agent

  3. 03Adapt

    Change content, colors and spacing yourself or with AI.

  4. 04Ship

    Build a fast page without carrying a visual builder runtime.

Visual editor · macOS beta

Open Astroblocks in Stacki.

Download our Astroblocks-ready edition of the open-source visual editor. Edit exposed component content and styles visually while your project remains ordinary Astro code.

Download for macOSView source on GitHub
Universal build for Apple Silicon and Intel Macs. Based on the open-source Stacki project.
Astroblocks components open in the Stacki visual editor
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 AstroblocksWhat it means for you
311 ready-made sectionsStart from a polished layout instead of a blank page.
One simple instructionWrite or say add HERO 08 to your AI agent.
A clean Astro fileThe component is added directly to your own project.
Everything stays editableChange the text, images, colors and layout whenever you want.
Choose your starting point

Try the library. Unlock it when it fits.

Use the free set in real work, then get the complete kit with one purchase.

Free

30 Astro components

Copy a curated set of production-ready sections and keep the code.

  • Live previews
  • Clean Astro files
  • Commercial use
Browse free components
Pro · one-time

All 311 components

$69

The complete library, ready for your own sites and client projects.

  • 281 additional premium blocks
  • Free future updates
  • AI-ready workflow
Get Astroblocks Pro
FAQ

Useful answers before you copy.

Still deciding? Explore the free components 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 Pro license is designed for 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.

Browse the librarySee how it works