How it works

Three steps to ship.

01

Copy the block

Browse the gallery, find a block you like, and click Copy to grab the source.

html 
<!-- hero-centered.astro is ready to use -->
<section class="relative isolate flex
  h-svh items-center px-6">
  <div class="mx-auto max-w-3xl text-center">
    <h1 class="text-6xl font-extrabold">
      Beautiful blocks,
      <span class="text-violet-600">
        ready to ship.
      </span>
    </h1>
  </div>
</section>

02

Drop it in your project

Paste the file into your Astro project. No installs, no imports, no configuration.

bash 
src/
└── pages/
    └── index.astro   ← your page
src/
└── components/
    └── HeroCentered.astro  ← paste here

03

Customise with Tailwind

Every class is plain Tailwind. Change colors, spacing, or layout in seconds.

html 
<!-- swap violet for your brand color -->
<h1 class="text-6xl font-extrabold">
  Beautiful blocks,
  <span class="text-indigo-600">
    ready to ship.
  </span>
</h1>