testimonials

Social proof sections with quotes, author attribution, and star ratings.

Testimonials Grid

testimonials

Testimonials

Loved by developers.

"BlockUI saved me hours on my last project. I grabbed a hero and a features section, tweaked the colors, and shipped the landing page the same afternoon."

Sarah Chen

Frontend Engineer

"Finally a component library that doesn't fight my design system. Because there is no design system — it's just Tailwind. Exactly what I wanted."

Marcus Rivera

Indie Hacker

"The code tab showing rendered HTML is genius. I can use these blocks in any project, not just Astro ones. Huge time saver."

Alex Nair

Full-stack Developer

"I've been building Astro sites for two years and BlockUI is now a permanent part of my workflow. The preview resize handle alone is worth it."

Tom Berg

Web Designer

"The minimalist variants are stunning. Clean, fast, accessible out of the box. My clients keep asking how I build so quickly — this is my secret."

Mia Laurent

UI Designer

"Open source, zero lock-in, and genuinely beautiful blocks. I've tried every similar tool and nothing comes close to how practical BlockUI is."

Daniel Webb

Software Engineer

<section class="bg-gray-50 px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <div class="mb-14 text-center">
      <p
        class="mb-3 text-xs font-semibold uppercase tracking-widest text-violet-600"
      >
        Testimonials
      </p>
      <h2
        class="text-4xl font-extrabold tracking-tight text-gray-950 sm:text-5xl"
      >
        Loved by developers.
      </h2>
    </div>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      <figure class="rounded-2xl border border-gray-200 bg-white p-7 shadow-xs">
        <div
          class="mb-4 flex gap-0.5 text-amber-400"
          aria-label="5 out of 5 stars"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </div>
        <blockquote class="mb-6 text-sm leading-7 text-gray-600">
          "BlockUI saved me hours on my last project. I grabbed a hero and a
          features section, tweaked the colors, and shipped the landing page the
          same afternoon."
        </blockquote>
        <figcaption class="flex items-center gap-3">
          <div
            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white bg-violet-500"
          >
            SC
          </div>
          <div>
            <p class="text-sm font-semibold text-gray-950">Sarah Chen</p>
            <p class="text-xs text-gray-400">Frontend Engineer</p>
          </div>
        </figcaption>
      </figure>
      <figure class="rounded-2xl border border-gray-200 bg-white p-7 shadow-xs">
        <div
          class="mb-4 flex gap-0.5 text-amber-400"
          aria-label="5 out of 5 stars"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </div>
        <blockquote class="mb-6 text-sm leading-7 text-gray-600">
          "Finally a component library that doesn&#39;t fight my design system.
          Because there is no design system — it&#39;s just Tailwind. Exactly
          what I wanted."
        </blockquote>
        <figcaption class="flex items-center gap-3">
          <div
            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white bg-sky-500"
          >
            MR
          </div>
          <div>
            <p class="text-sm font-semibold text-gray-950">Marcus Rivera</p>
            <p class="text-xs text-gray-400">Indie Hacker</p>
          </div>
        </figcaption>
      </figure>
      <figure class="rounded-2xl border border-gray-200 bg-white p-7 shadow-xs">
        <div
          class="mb-4 flex gap-0.5 text-amber-400"
          aria-label="5 out of 5 stars"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </div>
        <blockquote class="mb-6 text-sm leading-7 text-gray-600">
          "The code tab showing rendered HTML is genius. I can use these blocks
          in any project, not just Astro ones. Huge time saver."
        </blockquote>
        <figcaption class="flex items-center gap-3">
          <div
            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white bg-emerald-500"
          >
            AN
          </div>
          <div>
            <p class="text-sm font-semibold text-gray-950">Alex Nair</p>
            <p class="text-xs text-gray-400">Full-stack Developer</p>
          </div>
        </figcaption>
      </figure>
      <figure class="rounded-2xl border border-gray-200 bg-white p-7 shadow-xs">
        <div
          class="mb-4 flex gap-0.5 text-amber-400"
          aria-label="5 out of 5 stars"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </div>
        <blockquote class="mb-6 text-sm leading-7 text-gray-600">
          "I&#39;ve been building Astro sites for two years and BlockUI is now a
          permanent part of my workflow. The preview resize handle alone is
          worth it."
        </blockquote>
        <figcaption class="flex items-center gap-3">
          <div
            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white bg-amber-500"
          >
            TB
          </div>
          <div>
            <p class="text-sm font-semibold text-gray-950">Tom Berg</p>
            <p class="text-xs text-gray-400">Web Designer</p>
          </div>
        </figcaption>
      </figure>
      <figure class="rounded-2xl border border-gray-200 bg-white p-7 shadow-xs">
        <div
          class="mb-4 flex gap-0.5 text-amber-400"
          aria-label="5 out of 5 stars"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </div>
        <blockquote class="mb-6 text-sm leading-7 text-gray-600">
          "The minimalist variants are stunning. Clean, fast, accessible out of
          the box. My clients keep asking how I build so quickly — this is my
          secret."
        </blockquote>
        <figcaption class="flex items-center gap-3">
          <div
            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white bg-rose-500"
          >
            ML
          </div>
          <div>
            <p class="text-sm font-semibold text-gray-950">Mia Laurent</p>
            <p class="text-xs text-gray-400">UI Designer</p>
          </div>
        </figcaption>
      </figure>
      <figure class="rounded-2xl border border-gray-200 bg-white p-7 shadow-xs">
        <div
          class="mb-4 flex gap-0.5 text-amber-400"
          aria-label="5 out of 5 stars"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path></svg
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="h-4 w-4"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </div>
        <blockquote class="mb-6 text-sm leading-7 text-gray-600">
          "Open source, zero lock-in, and genuinely beautiful blocks. I&#39;ve
          tried every similar tool and nothing comes close to how practical
          BlockUI is."
        </blockquote>
        <figcaption class="flex items-center gap-3">
          <div
            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white bg-fuchsia-500"
          >
            DW
          </div>
          <div>
            <p class="text-sm font-semibold text-gray-950">Daniel Webb</p>
            <p class="text-xs text-gray-400">Software Engineer</p>
          </div>
        </figcaption>
      </figure>
    </div>
  </div>
</section>

Testimonials Featured

testimonials

Open

Testimonials

Loved by developers.

"I've been building Astro sites for two years and BlockUI is now a permanent part of my workflow. The preview at every breakpoint, the one-click copy, the zero-config setup — everything just works. I can't imagine going back."

Tom Berg

Web Designer at Studio Nordvik

"BlockUI saved me hours on my last project. I grabbed a hero and a features section, tweaked the colors, and shipped the landing page the same afternoon."

Sarah Chen

Frontend Engineer

"Finally a component library that doesn't fight my design system. Because there is no design system — it's just Tailwind. Exactly what I wanted."

Marcus Rivera

Indie Hacker

"The minimalist variants are stunning. Clean, fast, accessible out of the box. My clients keep asking how I build so quickly — this is my secret."

Mia Laurent

UI Designer

<section class="bg-white px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-5xl">
    <div class="mb-14">
      <p
        class="mb-3 text-xs font-semibold uppercase tracking-widest text-violet-600"
      >
        Testimonials
      </p>
      <h2
        class="text-4xl font-extrabold tracking-tight text-gray-950 sm:text-5xl"
      >
        Loved by developers.
      </h2>
    </div>
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-5">
      <!-- Featured quote -->
      <figure
        class="relative overflow-hidden rounded-3xl bg-gray-950 p-10 lg:col-span-3"
      >
        <div
          aria-hidden="true"
          class="absolute -top-20 -right-20 h-64 w-64 rounded-full bg-violet-700 opacity-20 blur-3xl"
        ></div>
        <div class="relative">
          <div
            class="mb-6 flex gap-1 text-violet-400"
            aria-label="5 out of 5 stars"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="h-4 w-4"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
                clip-rule="evenodd"
              ></path></svg
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="h-4 w-4"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
                clip-rule="evenodd"
              ></path></svg
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="h-4 w-4"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
                clip-rule="evenodd"
              ></path></svg
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="h-4 w-4"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
                clip-rule="evenodd"
              ></path></svg
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="h-4 w-4"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M8 1.25a.75.75 0 0 1 .692.463l1.32 3.052 3.316.379a.75.75 0 0 1 .434 1.272l-2.44 2.26.666 3.268a.75.75 0 0 1-1.107.802L8 10.884l-2.881 1.862a.75.75 0 0 1-1.107-.802l.666-3.268-2.44-2.26a.75.75 0 0 1 .434-1.272l3.316-.38L7.308 1.713A.75.75 0 0 1 8 1.25Z"
                clip-rule="evenodd"
              ></path>
            </svg>
          </div>
          <blockquote class="mb-8 text-lg leading-8 font-medium text-white">
            "I&#39;ve been building Astro sites for two years and BlockUI is now
            a permanent part of my workflow. The preview at every breakpoint,
            the one-click copy, the zero-config setup — everything just works. I
            can&#39;t imagine going back."
          </blockquote>
          <figcaption class="flex items-center gap-3">
            <div
              class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white"
            >
              TB
            </div>
            <div>
              <p class="text-sm font-semibold text-white">Tom Berg</p>
              <p class="text-xs text-gray-400">
                Web Designer at Studio Nordvik
              </p>
            </div>
          </figcaption>
        </div>
      </figure>
      <!-- Side quotes -->
      <div class="flex flex-col gap-4 lg:col-span-2">
        <figure
          class="flex flex-1 flex-col justify-between rounded-2xl border border-gray-100 bg-gray-50 p-6"
        >
          <blockquote class="mb-4 text-sm leading-6 text-gray-600">
            "BlockUI saved me hours on my last project. I grabbed a hero and a
            features section, tweaked the colors, and shipped the landing page
            the same afternoon."
          </blockquote>
          <figcaption class="flex items-center gap-2.5">
            <div
              class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white bg-violet-500"
            >
              SC
            </div>
            <div>
              <p class="text-xs font-semibold text-gray-950">Sarah Chen</p>
              <p class="text-[11px] text-gray-400">Frontend Engineer</p>
            </div>
          </figcaption>
        </figure>
        <figure
          class="flex flex-1 flex-col justify-between rounded-2xl border border-gray-100 bg-gray-50 p-6"
        >
          <blockquote class="mb-4 text-sm leading-6 text-gray-600">
            "Finally a component library that doesn&#39;t fight my design
            system. Because there is no design system — it&#39;s just Tailwind.
            Exactly what I wanted."
          </blockquote>
          <figcaption class="flex items-center gap-2.5">
            <div
              class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white bg-sky-500"
            >
              MR
            </div>
            <div>
              <p class="text-xs font-semibold text-gray-950">Marcus Rivera</p>
              <p class="text-[11px] text-gray-400">Indie Hacker</p>
            </div>
          </figcaption>
        </figure>
        <figure
          class="flex flex-1 flex-col justify-between rounded-2xl border border-gray-100 bg-gray-50 p-6"
        >
          <blockquote class="mb-4 text-sm leading-6 text-gray-600">
            "The minimalist variants are stunning. Clean, fast, accessible out
            of the box. My clients keep asking how I build so quickly — this is
            my secret."
          </blockquote>
          <figcaption class="flex items-center gap-2.5">
            <div
              class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white bg-rose-500"
            >
              ML
            </div>
            <div>
              <p class="text-xs font-semibold text-gray-950">Mia Laurent</p>
              <p class="text-[11px] text-gray-400">UI Designer</p>
            </div>
          </figcaption>
        </figure>
      </div>
    </div>
  </div>
</section>

Testimonials Minimal

testimonials

Open

Testimonials

What people are saying.

"BlockUI saved me hours on my last project. I grabbed a hero and a features section, tweaked the colors, and shipped the landing page the same afternoon."

Sarah Chen — Frontend Engineer

"Finally a component library that doesn't fight my design system. Because there is no design system — it's just Tailwind. Exactly what I wanted."

Marcus Rivera — Indie Hacker

"The code tab showing rendered HTML is genius. I can use these blocks in any project, not just Astro ones. Huge time saver."

Alex Nair — Full-stack Developer

"Open source, zero lock-in, and genuinely beautiful blocks. I've tried every similar tool and nothing comes close to how practical BlockUI is."

Daniel Webb — Software Engineer

<section class="bg-white px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-3xl">
    <div class="mb-14">
      <p
        class="mb-2 text-xs font-semibold uppercase tracking-widest text-gray-400"
      >
        Testimonials
      </p>
      <h2 class="text-3xl font-bold tracking-tight text-gray-950">
        What people are saying.
      </h2>
    </div>
    <div class="divide-y divide-gray-100">
      <figure class="py-8">
        <blockquote class="mb-4 text-base leading-7 text-gray-700">
          "BlockUI saved me hours on my last project. I grabbed a hero and a
          features section, tweaked the colors, and shipped the landing page the
          same afternoon."
        </blockquote>
        <figcaption class="flex items-center gap-2 text-sm">
          <span class="font-semibold text-gray-950">Sarah Chen</span>
          <span class="text-gray-300">—</span>
          <span class="text-gray-400">Frontend Engineer</span>
        </figcaption>
      </figure>
      <figure class="py-8">
        <blockquote class="mb-4 text-base leading-7 text-gray-700">
          "Finally a component library that doesn&#39;t fight my design system.
          Because there is no design system — it&#39;s just Tailwind. Exactly
          what I wanted."
        </blockquote>
        <figcaption class="flex items-center gap-2 text-sm">
          <span class="font-semibold text-gray-950">Marcus Rivera</span>
          <span class="text-gray-300">—</span>
          <span class="text-gray-400">Indie Hacker</span>
        </figcaption>
      </figure>
      <figure class="py-8">
        <blockquote class="mb-4 text-base leading-7 text-gray-700">
          "The code tab showing rendered HTML is genius. I can use these blocks
          in any project, not just Astro ones. Huge time saver."
        </blockquote>
        <figcaption class="flex items-center gap-2 text-sm">
          <span class="font-semibold text-gray-950">Alex Nair</span>
          <span class="text-gray-300">—</span>
          <span class="text-gray-400">Full-stack Developer</span>
        </figcaption>
      </figure>
      <figure class="py-8">
        <blockquote class="mb-4 text-base leading-7 text-gray-700">
          "Open source, zero lock-in, and genuinely beautiful blocks. I&#39;ve
          tried every similar tool and nothing comes close to how practical
          BlockUI is."
        </blockquote>
        <figcaption class="flex items-center gap-2 text-sm">
          <span class="font-semibold text-gray-950">Daniel Webb</span>
          <span class="text-gray-300">—</span>
          <span class="text-gray-400">Software Engineer</span>
        </figcaption>
      </figure>
    </div>
  </div>
</section>