astroblocksDownload all blocks

Docs

Using Astroblocks.

Everything you need, in about two minutes of reading.

All 311 Astroblocks are now free. Browse and copy every component directly on this site, or download the complete Astro project as one ZIP.

The complete free library

Browse all 311 free blocks at /blocks and copy the exact source from any card. There is no account, checkout or locked source code.

If you prefer working locally, download the ZIP. It contains the same complete library in a normal Astro project you can open in your editor or hand to an AI coding agent.

Start the downloaded project

The download is a normal Astro project, not an installer.

  1. Unzip it anywhere.
  2. Open the folder in your terminal (or hand it straight to Claude Code, Codex or Cursor).
  3. Install and start it:
    npm install
npm run dev
  4. Open the URL it prints – http://localhost:4322 by default.

The home page is a blank canvas. That’s your page – blocks stack inside it. It also has a “Copy starter prompt” button to hand your agent a first instruction.

Your kit ships the same gallery you see on this site, at /blocks(http://localhost:4322/blocks). Nothing is locked.Every card has a Copy button. Filter by category, preview any block full-size, copy the exact code you see.

The downloaded gallery works locally and never asks you to unlock anything.

Two ways to add a block

1. Copy and paste. Hit Copy on a card, paste the code into your project. You get the component source only – no demo data, no photos attached.

2. Just name it. Every card has a label like FEATURES 16 orHERO 05. Point your agent at the kit and say:

Read AGENTS.md and add HERO 05 to my page,
then put FEATURES 16 below it.

The kit’s AGENTS.md explains how those labels map to files, so the agent resolves the right block instead of guessing. Both routes end in the same place – use whichever is quicker.

AGENTS.md – the kit’s brain

The design system is written out for the AI: colour and spacing tokens, the H1–H6 scale, the three button types, code conventions, and how to add a section. That’s why an agent editing these blocks reaches for the right token instead of inventing a hex.

Claude Code picks it up through CLAUDE.md, Codex reads AGENTS.mddirectly, and Cursor can be pointed at the same file. It’s plain Markdown – edit it and the rules change.

Changing the look once

Colours, spacing, radii, the type scale and button styles all live insrc/layouts/Layout.astro. Edit them there and every block follows – you don’t restyle blocks one by one. Or just say “make the accent green” and let the agent do it.

Images

Blocks never hardcode a photo. Images come in through a prop and default to a bundled placeholder, so a copied block never drags a broken asset path along:

<HeroCentered title="…" image="/my-photo.jpg" imageAlt="Description" />

Drop your files in public/. The photos you see in the gallery are demo URLs that live only in the registry – they don’t travel with a block.

Updates

New blocks land in the same free download. Return to Astroblocks whenever you want the latest ZIP.

License

Use the blocks in unlimited personal and client projects, and edit them however you like. The full terms ship with the kit. What you can’t do is resell the kit itself as a block library.

Still stuck?

Email pawel.rudko@icloud.com and say what you’re trying to build. If something here is unclear, that’s worth knowing – this page changes when people ask.

Download all 311 blocksBrowse the library →