Docs
Using Astroblocks.
Everything you need, in about two minutes of reading.
Bought the kit and still seeing “Unlock $69” here? That lock is only on this website. Your download has all 311 blocks unlocked – the same gallery, with a Copy button on every card. Run it locally and use that one:jump to your gallery →
Free blocks vs the full kit
This site is the shop window. 30 blocks are free – browse them at/blocks and copy the source straight from the card, no account needed. The other 281 are premium and show Unlock $69 instead of Copy; their source is never published here.
Buying the kit gets you all 311, unlocked, on your own machine – so once you own it, you don’t need this page’s Copy buttons at all. Everything below is about the copy you download.
After you buy – start here
You get a single ZIP. It’s a normal Astro project, not an installer.
- Unzip it anywhere.
- Open the folder in your terminal (or hand it straight to Claude Code, Codex or Cursor).
- Install and start it:
npm install npm run dev - Open the URL it prints –
http://localhost:4322by 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 own gallery – all 311 blocks, all copyable
Your kit ships the same gallery you see on this site, at /blocks(http://localhost:4322/blocks). The difference: nothing is locked. Every card has a Copy button, including the 281 premium ones. Filter by category, preview any block full-size, copy the exact code you see.
This is the gallery to use once you’ve bought. It works offline 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 download. Grab the latest ZIP from your Gumroad library whenever you want them – there’s no subscription and no expiry.
License
One payment. Use the blocks in unlimited personal and client projects, and edit them however you like. The full terms ship with the kit as LICENSE-PRO.md. 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.