faq

Frequently asked questions with expandable answers or static layouts.

Faq Accordion

faq

FAQ

Common questions.

Do I need to install anything to use BlockUI?

No. Every block is a standalone .astro file. Copy it into your project and it works immediately — no npm install, no config, no peer dependencies.

Can I use BlockUI blocks outside of Astro?

Yes. Each block renders to plain HTML with Tailwind utility classes. You can copy the rendered output and use it in any framework or plain HTML project.

Is BlockUI free?

BlockUI is completely free and open-source under the MIT license. Use it in personal and commercial projects without restriction.

How do I customise a block?

Every block uses plain Tailwind classes directly in the markup. Change a color, adjust spacing, or restructure the HTML — there are no abstractions hiding anything from you.

Are the blocks accessible?

Yes. All blocks use semantic HTML, include appropriate ARIA attributes, and support keyboard navigation out of the box.

How often are new blocks added?

New blocks and variants are added regularly. Watch the GitHub repository or follow us on Twitter to get notified when new content ships.

<section class="bg-white px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-3xl">
    <div class="mb-12">
      <p
        class="mb-3 text-xs font-semibold uppercase tracking-widest text-violet-600"
      >
        FAQ
      </p>
      <h2
        class="text-4xl font-extrabold tracking-tight text-gray-950 sm:text-5xl"
      >
        Common questions.
      </h2>
    </div>
    <div class="divide-y divide-gray-100">
      <details class="group py-5">
        <summary
          class="flex cursor-pointer list-none items-center justify-between gap-6 text-base font-semibold text-gray-950 marker:hidden"
        >
          Do I need to install anything to use BlockUI?
          <span
            class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-100 transition group-open:rotate-45"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="h-3.5 w-3.5 text-gray-500"
              aria-hidden="true"
            >
              <path
                d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
              ></path>
            </svg>
          </span>
        </summary>
        <p class="mt-4 text-sm leading-7 text-gray-500">
          No. Every block is a standalone .astro file. Copy it into your project
          and it works immediately — no npm install, no config, no peer
          dependencies.
        </p>
      </details>
      <details class="group py-5">
        <summary
          class="flex cursor-pointer list-none items-center justify-between gap-6 text-base font-semibold text-gray-950 marker:hidden"
        >
          Can I use BlockUI blocks outside of Astro?
          <span
            class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-100 transition group-open:rotate-45"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="h-3.5 w-3.5 text-gray-500"
              aria-hidden="true"
            >
              <path
                d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
              ></path>
            </svg>
          </span>
        </summary>
        <p class="mt-4 text-sm leading-7 text-gray-500">
          Yes. Each block renders to plain HTML with Tailwind utility classes.
          You can copy the rendered output and use it in any framework or plain
          HTML project.
        </p>
      </details>
      <details class="group py-5">
        <summary
          class="flex cursor-pointer list-none items-center justify-between gap-6 text-base font-semibold text-gray-950 marker:hidden"
        >
          Is BlockUI free?
          <span
            class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-100 transition group-open:rotate-45"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="h-3.5 w-3.5 text-gray-500"
              aria-hidden="true"
            >
              <path
                d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
              ></path>
            </svg>
          </span>
        </summary>
        <p class="mt-4 text-sm leading-7 text-gray-500">
          BlockUI is completely free and open-source under the MIT license. Use
          it in personal and commercial projects without restriction.
        </p>
      </details>
      <details class="group py-5">
        <summary
          class="flex cursor-pointer list-none items-center justify-between gap-6 text-base font-semibold text-gray-950 marker:hidden"
        >
          How do I customise a block?
          <span
            class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-100 transition group-open:rotate-45"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="h-3.5 w-3.5 text-gray-500"
              aria-hidden="true"
            >
              <path
                d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
              ></path>
            </svg>
          </span>
        </summary>
        <p class="mt-4 text-sm leading-7 text-gray-500">
          Every block uses plain Tailwind classes directly in the markup. Change
          a color, adjust spacing, or restructure the HTML — there are no
          abstractions hiding anything from you.
        </p>
      </details>
      <details class="group py-5">
        <summary
          class="flex cursor-pointer list-none items-center justify-between gap-6 text-base font-semibold text-gray-950 marker:hidden"
        >
          Are the blocks accessible?
          <span
            class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-100 transition group-open:rotate-45"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="h-3.5 w-3.5 text-gray-500"
              aria-hidden="true"
            >
              <path
                d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
              ></path>
            </svg>
          </span>
        </summary>
        <p class="mt-4 text-sm leading-7 text-gray-500">
          Yes. All blocks use semantic HTML, include appropriate ARIA
          attributes, and support keyboard navigation out of the box.
        </p>
      </details>
      <details class="group py-5">
        <summary
          class="flex cursor-pointer list-none items-center justify-between gap-6 text-base font-semibold text-gray-950 marker:hidden"
        >
          How often are new blocks added?
          <span
            class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-100 transition group-open:rotate-45"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="h-3.5 w-3.5 text-gray-500"
              aria-hidden="true"
            >
              <path
                d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
              ></path>
            </svg>
          </span>
        </summary>
        <p class="mt-4 text-sm leading-7 text-gray-500">
          New blocks and variants are added regularly. Watch the GitHub
          repository or follow us on Twitter to get notified when new content
          ships.
        </p>
      </details>
    </div>
  </div>
</section>

Faq Split

faq

Open

FAQ

Common questions.

Do I need to install anything?

No. Every block is a standalone .astro file. Copy it into your project and it works immediately — no npm install, no config, no peer dependencies.

Can I use blocks outside of Astro?

Yes. Each block renders to plain HTML with Tailwind classes. Copy the rendered output and use it in any framework or plain HTML project.

Is BlockUI free?

BlockUI is completely free and open-source under the MIT license. Use it in personal and commercial projects without restriction.

How do I customise a block?

Every block uses plain Tailwind classes directly in the markup. Change colors, adjust spacing, or restructure the HTML — no abstractions, no surprises.

Are the blocks accessible?

Yes. All blocks use semantic HTML, include appropriate ARIA attributes, and support keyboard navigation out of the box.

How often are new blocks added?

New blocks and variants are added regularly. Watch the GitHub repo or follow us on Twitter to get notified.

<section class="bg-gray-50 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"
      >
        FAQ
      </p>
      <h2
        class="text-4xl font-extrabold tracking-tight text-gray-950 sm:text-5xl"
      >
        Common questions.
      </h2>
    </div>
    <div class="grid grid-cols-1 gap-x-16 gap-y-0 sm:grid-cols-2">
      <div class="divide-y divide-gray-200">
        <div class="py-7">
          <p class="mb-3 text-sm font-semibold text-gray-950">
            Do I need to install anything?
          </p>
          <p class="text-sm leading-6 text-gray-500">
            No. Every block is a standalone .astro file. Copy it into your
            project and it works immediately — no npm install, no config, no
            peer dependencies.
          </p>
        </div>
        <div class="py-7">
          <p class="mb-3 text-sm font-semibold text-gray-950">
            Can I use blocks outside of Astro?
          </p>
          <p class="text-sm leading-6 text-gray-500">
            Yes. Each block renders to plain HTML with Tailwind classes. Copy
            the rendered output and use it in any framework or plain HTML
            project.
          </p>
        </div>
        <div class="py-7">
          <p class="mb-3 text-sm font-semibold text-gray-950">
            Is BlockUI free?
          </p>
          <p class="text-sm leading-6 text-gray-500">
            BlockUI is completely free and open-source under the MIT license.
            Use it in personal and commercial projects without restriction.
          </p>
        </div>
      </div>
      <div class="divide-y divide-gray-200">
        <div class="py-7">
          <p class="mb-3 text-sm font-semibold text-gray-950">
            How do I customise a block?
          </p>
          <p class="text-sm leading-6 text-gray-500">
            Every block uses plain Tailwind classes directly in the markup.
            Change colors, adjust spacing, or restructure the HTML — no
            abstractions, no surprises.
          </p>
        </div>
        <div class="py-7">
          <p class="mb-3 text-sm font-semibold text-gray-950">
            Are the blocks accessible?
          </p>
          <p class="text-sm leading-6 text-gray-500">
            Yes. All blocks use semantic HTML, include appropriate ARIA
            attributes, and support keyboard navigation out of the box.
          </p>
        </div>
        <div class="py-7">
          <p class="mb-3 text-sm font-semibold text-gray-950">
            How often are new blocks added?
          </p>
          <p class="text-sm leading-6 text-gray-500">
            New blocks and variants are added regularly. Watch the GitHub repo
            or follow us on Twitter to get notified.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

Faq Minimal

faq

Open

FAQ

Common questions.

Do I need to install anything?: No. Every block is a standalone .astro file. Copy it into your project and it works immediately — no npm install, no config, no peer dependencies.
Can I use blocks outside of Astro?: Each block renders to plain HTML with Tailwind classes. Copy the rendered output and paste it into any framework or plain HTML project.
Is BlockUI free?: Completely free and open-source under the MIT license. Use it in personal and commercial projects without restriction.
How do I customise a block?: Every block uses plain Tailwind classes directly in the markup. Change colors, adjust spacing, restructure the HTML — it's yours to own.
Are the blocks accessible?: Yes. Semantic HTML, ARIA attributes, and keyboard navigation are included in every block from the start.

<section class="border-t border-gray-100 bg-white px-6 py-24 lg:px-8">
  <div class="mx-auto max-w-2xl">
    <div class="mb-12">
      <p
        class="mb-2 text-xs font-semibold uppercase tracking-widest text-gray-400"
      >
        FAQ
      </p>
      <h2 class="text-3xl font-bold tracking-tight text-gray-950">
        Common questions.
      </h2>
    </div>
    <dl class="space-y-8">
      <div>
        <dt class="mb-2 text-sm font-semibold text-gray-950">
          Do I need to install anything?
        </dt>
        <dd class="text-sm leading-6 text-gray-500">
          No. Every block is a standalone .astro file. Copy it into your project
          and it works immediately — no npm install, no config, no peer
          dependencies.
        </dd>
      </div>
      <div>
        <dt class="mb-2 text-sm font-semibold text-gray-950">
          Can I use blocks outside of Astro?
        </dt>
        <dd class="text-sm leading-6 text-gray-500">
          Each block renders to plain HTML with Tailwind classes. Copy the
          rendered output and paste it into any framework or plain HTML project.
        </dd>
      </div>
      <div>
        <dt class="mb-2 text-sm font-semibold text-gray-950">
          Is BlockUI free?
        </dt>
        <dd class="text-sm leading-6 text-gray-500">
          Completely free and open-source under the MIT license. Use it in
          personal and commercial projects without restriction.
        </dd>
      </div>
      <div>
        <dt class="mb-2 text-sm font-semibold text-gray-950">
          How do I customise a block?
        </dt>
        <dd class="text-sm leading-6 text-gray-500">
          Every block uses plain Tailwind classes directly in the markup. Change
          colors, adjust spacing, restructure the HTML — it&#39;s yours to own.
        </dd>
      </div>
      <div>
        <dt class="mb-2 text-sm font-semibold text-gray-950">
          Are the blocks accessible?
        </dt>
        <dd class="text-sm leading-6 text-gray-500">
          Yes. Semantic HTML, ARIA attributes, and keyboard navigation are
          included in every block from the start.
        </dd>
      </div>
    </dl>
  </div>
</section>