codedemo

Code snippet displays and step-by-step technical walkthroughs.

Code Demo Split

codedemo

Open

How it works

Three steps to ship.

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>

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

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>

<section class="bg-white px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <div class="mb-16 max-w-xl">
      <p
        class="mb-3 text-xs font-semibold uppercase tracking-widest text-violet-600"
      >
        How it works
      </p>
      <h2
        class="text-4xl font-extrabold tracking-tight text-gray-950 sm:text-5xl"
      >
        Three steps to ship.
      </h2>
    </div>
    <div class="space-y-6">
      <div
        class="grid grid-cols-1 gap-6 overflow-hidden rounded-2xl border border-gray-100 bg-gray-50 p-8 sm:grid-cols-2 sm:items-center"
      >
        <div>
          <p class="mb-2 font-mono text-xs text-gray-300">01</p>
          <h3 class="mb-2 text-lg font-bold tracking-tight text-gray-950">
            Copy the block
          </h3>
          <p class="text-sm leading-6 text-gray-500">
            Browse the gallery, find a block you like, and click Copy to grab
            the source.
          </p>
        </div>
        <div
          class="overflow-hidden rounded-xl bg-gray-950 font-mono text-xs leading-6"
        >
          <div
            class="flex items-center gap-1.5 border-b border-white/10 px-4 py-3"
          >
            <span class="h-2 w-2 rounded-full bg-red-500/50"></span>
            <span class="h-2 w-2 rounded-full bg-amber-400/50"></span>
            <span class="h-2 w-2 rounded-full bg-emerald-400/50"></span>
            <span class="ml-2 text-[11px] text-gray-600">html</span>
          </div>
          <pre class="overflow-x-auto px-5 py-4 text-gray-300">
&lt;!-- hero-centered.astro is ready to use --&gt;
&lt;section class=&quot;relative isolate flex
  h-svh items-center px-6&quot;&gt;
  &lt;div class=&quot;mx-auto max-w-3xl text-center&quot;&gt;
    &lt;h1 class=&quot;text-6xl font-extrabold&quot;&gt;
      Beautiful blocks,
      &lt;span class=&quot;text-violet-600&quot;&gt;
        ready to ship.
      &lt;/span&gt;
    &lt;/h1&gt;
  &lt;/div&gt;
&lt;/section&gt;</pre
          >
        </div>
      </div>
      <div
        class="grid grid-cols-1 gap-6 overflow-hidden rounded-2xl border border-gray-100 bg-gray-50 p-8 sm:grid-cols-2 sm:items-center"
      >
        <div>
          <p class="mb-2 font-mono text-xs text-gray-300">02</p>
          <h3 class="mb-2 text-lg font-bold tracking-tight text-gray-950">
            Drop it in your project
          </h3>
          <p class="text-sm leading-6 text-gray-500">
            Paste the file into your Astro project. No installs, no imports, no
            configuration.
          </p>
        </div>
        <div
          class="overflow-hidden rounded-xl bg-gray-950 font-mono text-xs leading-6"
        >
          <div
            class="flex items-center gap-1.5 border-b border-white/10 px-4 py-3"
          >
            <span class="h-2 w-2 rounded-full bg-red-500/50"></span>
            <span class="h-2 w-2 rounded-full bg-amber-400/50"></span>
            <span class="h-2 w-2 rounded-full bg-emerald-400/50"></span>
            <span class="ml-2 text-[11px] text-gray-600">bash</span>
          </div>
          <pre class="overflow-x-auto px-5 py-4 text-gray-300">
src/
└── pages/
    └── index.astro   ← your page
src/
└── components/
    └── HeroCentered.astro  ← paste here</pre
          >
        </div>
      </div>
      <div
        class="grid grid-cols-1 gap-6 overflow-hidden rounded-2xl border border-gray-100 bg-gray-50 p-8 sm:grid-cols-2 sm:items-center"
      >
        <div>
          <p class="mb-2 font-mono text-xs text-gray-300">03</p>
          <h3 class="mb-2 text-lg font-bold tracking-tight text-gray-950">
            Customise with Tailwind
          </h3>
          <p class="text-sm leading-6 text-gray-500">
            Every class is plain Tailwind. Change colors, spacing, or layout in
            seconds.
          </p>
        </div>
        <div
          class="overflow-hidden rounded-xl bg-gray-950 font-mono text-xs leading-6"
        >
          <div
            class="flex items-center gap-1.5 border-b border-white/10 px-4 py-3"
          >
            <span class="h-2 w-2 rounded-full bg-red-500/50"></span>
            <span class="h-2 w-2 rounded-full bg-amber-400/50"></span>
            <span class="h-2 w-2 rounded-full bg-emerald-400/50"></span>
            <span class="ml-2 text-[11px] text-gray-600">html</span>
          </div>
          <pre class="overflow-x-auto px-5 py-4 text-gray-300">
&lt;!-- swap violet for your brand color --&gt;
&lt;h1 class=&quot;text-6xl font-extrabold&quot;&gt;
  Beautiful blocks,
  &lt;span class=&quot;text-indigo-600&quot;&gt;
    ready to ship.
  &lt;/span&gt;
&lt;/h1&gt;</pre
          >
        </div>
      </div>
    </div>
  </div>
</section>

Code Demo Terminal

codedemo

Open

Zero config

Paste it. Run it. Done.

No CLI, no config file, no peer dependency warnings. Just copy one file and start the dev server.

zsh — my-astro-project

❯ cd my-astro-project

❯ cp hero-centered.astro src/components/

✓ Copied in 0ms. No install needed.

❯ bun dev

astro v4.0.0 ready in 312ms

┃ Local http://localhost:4321/

┃ Network http://192.168.1.5:4321/

❯

No npm install No config files No peer deps Works with any Astro project

<section class="bg-gray-950 px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-3xl">
    <div class="mb-12 text-center">
      <p
        class="mb-3 text-xs font-semibold uppercase tracking-widest text-violet-400"
      >
        Zero config
      </p>
      <h2 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl">
        Paste it. Run it. Done.
      </h2>
      <p class="mx-auto mt-4 max-w-lg text-base leading-7 text-gray-400">
        No CLI, no config file, no peer dependency warnings. Just copy one file
        and start the dev server.
      </p>
    </div>
    <!-- Terminal window -->
    <div
      class="overflow-hidden rounded-2xl border border-white/10 bg-black/60 font-mono text-sm backdrop-blur-sm"
    >
      <div class="flex items-center gap-2 border-b border-white/10 px-5 py-3.5">
        <span class="h-3 w-3 rounded-full bg-red-500/60"></span>
        <span class="h-3 w-3 rounded-full bg-amber-400/60"></span>
        <span class="h-3 w-3 rounded-full bg-emerald-400/60"></span>
        <span class="ml-3 text-xs text-gray-500">zsh — my-astro-project</span>
      </div>
      <div class="space-y-0.5 px-5 py-5 leading-7">
        <p class="text-gray-200">
          <span class="mr-2 text-violet-500">❯</span> cd my-astro-project
        </p>
        <p class="text-gray-500"></p>
        <p class="text-gray-200">
          <span class="mr-2 text-violet-500">❯</span> cp hero-centered.astro
          src/components/
        </p>
        <p class="text-gray-500"></p>
        <p class="text-emerald-400">✓ Copied in 0ms. No install needed.</p>
        <p class="text-gray-500"></p>
        <p class="text-gray-200">
          <span class="mr-2 text-violet-500">❯</span> bun dev
        </p>
        <p class="text-gray-500"></p>
        <p class="text-gray-500">astro v4.0.0 ready in 312ms</p>
        <p class="text-gray-500"></p>
        <p class="text-violet-400">┃ Local http://localhost:4321/</p>
        <p class="text-gray-500">┃ Network http://192.168.1.5:4321/</p>
        <p class="text-gray-200">
          <span class="mr-2 text-violet-500">❯</span>
          <span
            class="inline-block h-4 w-2 animate-pulse bg-gray-400 align-middle"
          ></span>
        </p>
      </div>
    </div>
    <div
      class="mt-10 flex flex-wrap items-center justify-center gap-6 text-xs text-gray-500"
    >
      <span class="flex items-center gap-1.5">
        <span class="h-1 w-1 rounded-full bg-violet-500"></span> No npm install </span
      ><span class="flex items-center gap-1.5">
        <span class="h-1 w-1 rounded-full bg-violet-500"></span> No config files </span
      ><span class="flex items-center gap-1.5">
        <span class="h-1 w-1 rounded-full bg-violet-500"></span> No peer deps </span
      ><span class="flex items-center gap-1.5">
        <span class="h-1 w-1 rounded-full bg-violet-500"></span> Works with any
        Astro project
      </span>
    </div>
  </div>
</section>

Code Demo Minimal

codedemo

Open

How it works

Simple by design.

No imports .astro

---
// Nothing to import. Nothing to configure.
---

<section class="...">
  <h1>Your content here.</h1>
</section>

Plain Tailwind .astro

<!-- Every class is standard Tailwind.
     Change anything you want. -->
<h1 class="text-5xl font-extrabold
           tracking-tight text-gray-950">
  Beautiful blocks.
</h1>

Works anywhere .astro

<!-- Renders to plain HTML.
     Use it in React, Vue, or any framework. -->
<section class="relative isolate ...">
  <div class="mx-auto max-w-3xl">
    ...
  </div>
</section>

<section class="border-t border-gray-100 bg-white px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <div class="mb-14 max-w-lg">
      <p
        class="mb-2 text-xs font-semibold uppercase tracking-widest text-gray-400"
      >
        How it works
      </p>
      <h2 class="text-3xl font-bold tracking-tight text-gray-950">
        Simple by design.
      </h2>
    </div>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
      <div class="overflow-hidden rounded-2xl border border-gray-100">
        <div
          class="flex items-center justify-between border-b border-gray-100 bg-gray-50 px-4 py-3"
        >
          <span class="text-xs font-semibold text-gray-500">No imports</span>
          <span class="font-mono text-[10px] text-gray-300">.astro</span>
        </div>
        <pre
          class="overflow-x-auto bg-white px-4 py-4 font-mono text-xs leading-6 text-gray-400"
        >
---
// Nothing to import. Nothing to configure.
---

&lt;section class=&quot;...&quot;&gt;
  &lt;h1&gt;Your content here.&lt;/h1&gt;
&lt;/section&gt;</pre
        >
      </div>
      <div class="overflow-hidden rounded-2xl border border-gray-100">
        <div
          class="flex items-center justify-between border-b border-gray-100 bg-gray-50 px-4 py-3"
        >
          <span class="text-xs font-semibold text-gray-500"
            >Plain Tailwind</span
          >
          <span class="font-mono text-[10px] text-gray-300">.astro</span>
        </div>
        <pre
          class="overflow-x-auto bg-white px-4 py-4 font-mono text-xs leading-6 text-gray-400"
        >
&lt;!-- Every class is standard Tailwind.
     Change anything you want. --&gt;
&lt;h1 class=&quot;text-5xl font-extrabold
           tracking-tight text-gray-950&quot;&gt;
  Beautiful blocks.
&lt;/h1&gt;</pre
        >
      </div>
      <div class="overflow-hidden rounded-2xl border border-gray-100">
        <div
          class="flex items-center justify-between border-b border-gray-100 bg-gray-50 px-4 py-3"
        >
          <span class="text-xs font-semibold text-gray-500"
            >Works anywhere</span
          >
          <span class="font-mono text-[10px] text-gray-300">.astro</span>
        </div>
        <pre
          class="overflow-x-auto bg-white px-4 py-4 font-mono text-xs leading-6 text-gray-400"
        >
&lt;!-- Renders to plain HTML.
     Use it in React, Vue, or any framework. --&gt;
&lt;section class=&quot;relative isolate ...&quot;&gt;
  &lt;div class=&quot;mx-auto max-w-3xl&quot;&gt;
    ...
  &lt;/div&gt;
&lt;/section&gt;</pre
        >
      </div>
    </div>
  </div>
</section>