Marketing block

No-JS FAQ Accordion

Exclusive accordion behaviour from named <details> elements — no state, no hooks, no JavaScript, full keyboard support for free.

121 lineslucide-reactAdded 8 Aug 2026Updated 2 Sept 2026

faq
accordion
details
no-js
questions

What's included

components/faq-accordion.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add faq-accordion

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Frequently asked questions

Everything people ask before getting started.

Can I use this in a commercial project?

Yes. Everything here is yours to ship in client work and paid products, with no attribution required.

Do I need a specific framework?

No. The markup is plain HTML and the styling is utility classes, so it drops into any stack that can render an element.

How do updates work?

Copied code is yours — nothing reaches back into your project. Pull a newer version whenever you want it.

Is there a free tier?

There is. A large part of the catalog is free forever; the paid plan unlocks the rest and removes usage limits.

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/faq-accordion.tsx

/**
 * <FaqAccordion> — a frequently-asked-questions list.
 *
 * Built on <details>/<summary> with a shared `name`, which gives real
 * accordion behaviour — opening one closes the rest — with no state, no
 * effect hook and no JavaScript at all. Keyboard support and the
 * open/closed state exposed to screen readers come free from the elements.
 *
 * Pass `exclusive={false}` for an list where several answers can sit open
 * at once.
 */

import * as React from 'react'
import { Plus } from 'lucide-react'

export interface FaqItem {
  question: string
  answer: string
}

export interface FaqAccordionProps {
  items?: FaqItem[]
  heading?: string
  subheading?: string
  /** Only one answer open at a time. */
  exclusive?: boolean
  className?: string
}

const DEFAULT_ITEMS: FaqItem[] = [
  {
    question: 'Can I use this in a commercial project?',
    answer:
      'Yes. Everything here is yours to ship in client work and paid products, with no attribution required.',
  },
  {
    question: 'Do I need a specific framework?',
    answer:
      'No. The markup is plain HTML and the styling is utility classes, so it drops into any stack that can render an element.',
  },
  {
    question: 'How do updates work?',
    answer:
      'Copied code is yours — nothing reaches back into your project. Pull a newer version whenever you want it.',
  },
  {
    question: 'Is there a free tier?',
    answer:
      'There is. A large part of the catalog is free forever; the paid plan unlocks the rest and removes usage limits.',
  },
]

/*
  A stable id suffix derived from this instance's own content.

  `useId` is the right answer and is not available here: this is a server
  component and hooks are not. Hashing what makes one copy different from
  another gives each its own name without a hook, a prop or a counter — and
  it stays stable across server and client renders, which a counter would
  not.
*/
function instanceId(...parts: (string | undefined)[]): string {
  const text = parts.filter(Boolean).join('|')
  let hash = 0
  for (let i = 0; i < text.length; i++) hash = (Math.imul(hash, 31) + text.charCodeAt(i)) | 0
  return (hash >>> 0).toString(36).slice(0, 6)
}

export function FaqAccordion({
  items = DEFAULT_ITEMS,
  heading = 'Frequently asked questions',
  subheading = 'Everything people ask before getting started.',
  exclusive = true,
  className = '',
}: FaqAccordionProps) {
  /*
   * The exclusive-<details> group name, derived rather than written down.
   *
   * `name` on <details> is DOCUMENT-global: every <details> sharing it is
   * one accordion, wherever on the page it sits. A literal therefore fuses
   * two copies of this block into a single accordion — opening a question
   * in one silently closes a question in the other — and a page rendering
   * several of these at once is exactly what the catalog hubs do.
   */
  const group = `faq-${instanceId(heading, subheading, items[0]?.question)}`

  return (
    <section className={`mx-auto w-full max-w-3xl px-4 py-16 sm:px-6 ${className}`}>
      <div className="mx-auto mb-10 max-w-2xl text-center">
        <h2 className="text-balance text-3xl font-bold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        {subheading ? (
          <p className="mt-3 text-muted-foreground">{subheading}</p>
        ) : null}
      </div>

      <div className="divide-y divide-border/60 overflow-hidden rounded-2xl border border-border/60 bg-card/60">
        {items.map((item) => (
          <details
            key={item.question}
            name={exclusive ? group : undefined}
            className="group px-5 py-1 [&_summary::-webkit-details-marker]:hidden"
          >
            <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-4 text-start font-semibold transition-colors hover:text-foreground/80">
              {item.question}
              <Plus
                aria-hidden
                className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-45"
              />
            </summary>
            <p className="pb-5 pe-8 text-sm leading-relaxed text-muted-foreground">
              {item.answer}
            </p>
          </details>
        ))}
      </div>
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/faq-accordion.tsx and import it where you need the section:

import { FaqAccordion } from '@/components/faq-accordion'

Customize

3 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`items`	`FaqItem[]`	`DEFAULT_ITEMS`
`heading`	`string`	`'Frequently asked questions'`
`subheading`	`string`	`'Everything people ask before getting started.'`
`exclusive`Only one answer open at a time.	`boolean`	`true`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

faq-accordion.html

<!--
  No-JS FAQ Accordion — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section class="mx-auto w-full max-w-3xl px-4 py-16 sm:px-6 ">
  <div class="mx-auto mb-10 max-w-2xl text-center">
    <h2 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">Frequently asked questions</h2>
    <p class="mt-3 text-muted-foreground">Everything people ask before getting started.</p>
  </div>
  <div class="divide-y divide-border/60 overflow-hidden rounded-2xl border border-border/60 bg-card/60">
    <details name="faq-192xqq" class="group px-5 py-1 [&amp;amp;_summary::-webkit-details-marker]:hidden">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4 text-start font-semibold transition-colors hover:text-foreground/80">Can I use this in a commercial project?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-45" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></summary>
      <p class="pb-5 pe-8 text-sm leading-relaxed text-muted-foreground">Yes. Everything here is yours to ship in client work and paid products, with no attribution required.</p>
    </details>
    <details name="faq-192xqq" class="group px-5 py-1 [&amp;amp;_summary::-webkit-details-marker]:hidden">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4 text-start font-semibold transition-colors hover:text-foreground/80">Do I need a specific framework?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-45" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></summary>
      <p class="pb-5 pe-8 text-sm leading-relaxed text-muted-foreground">No. The markup is plain HTML and the styling is utility classes, so it drops into any stack that can render an element.</p>
    </details>
    <details name="faq-192xqq" class="group px-5 py-1 [&amp;amp;_summary::-webkit-details-marker]:hidden">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4 text-start font-semibold transition-colors hover:text-foreground/80">How do updates work?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-45" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></summary>
      <p class="pb-5 pe-8 text-sm leading-relaxed text-muted-foreground">Copied code is yours — nothing reaches back into your project. Pull a newer version whenever you want it.</p>
    </details>
    <details name="faq-192xqq" class="group px-5 py-1 [&amp;amp;_summary::-webkit-details-marker]:hidden">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4 text-start font-semibold transition-colors hover:text-foreground/80">Is there a free tier?<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-45" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></summary>
      <p class="pb-5 pe-8 text-sm leading-relaxed text-muted-foreground">There is. A large part of the catalog is free forever; the paid plan unlocks the rest and removes usage limits.</p>
    </details>
  </div>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

6 more blocks in FAQ

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse FAQ

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More FAQ blocks

View category

Questions, answered

The things people ask before they buy — and a way to ask the ones that are not here.

Still not sure?

Send the question. A person reads it, and you get an answer rather than a link to this page.

Ask a question

What happens when my licence expires?

Nothing stops working. What ends is access to components published after your window — everything you already copied stays yours to ship, permanently, with no check at runtime.

Can I use this for client work?

Yes, on any paid plan, including projects you hand over to the client afterwards. The one thing no licence covers is reselling the components themselves as a competing library.

Do I need to credit you?

No. Attribution is never required, on any plan, including the free one.

Is there a team plan?

There is, priced per seat, with shared brand tokens and one workspace everybody pulls from. It can be billed monthly or bought outright for a year.

What if I need something that is not in the catalog?

Ask. Requests that several people want are usually the next thing built, and the roadmap is public.

Two-Column FAQ with Help Rail

Questions on the right against a sticky rail that keeps a route to a human in view — for the visitor whose objection is not on the list.

FAQ170 lines1 dep2 Sept

Common questions

Short answers, all of them on the page.

Is there a free plan?: Yes, and it is not a trial. Browsing, customising and copying stay free permanently — what a paid licence buys is the right to ship the result commercially.
Which frameworks are supported?: The effects are CSS-first and work anywhere that renders an element. The blocks, pages and templates are React and Tailwind.
Do I need an account to copy code?: No. Every artifact is readable and copyable without signing in, and the public API needs no key.
How do updates reach my project?: They do not, by design. Copied code is yours and nothing reaches back into your repository — you pull a newer version when you actually want one.
Can I customise before copying?: Yes. Colours, timing and sizing are editable in the browser, and what you copy is what you configured.
What about accessibility?: Components ship with real semantics and honour prefers-reduced-motion. Anything decorative that animates is gated so it does not run for visitors who have asked for less motion.

Open FAQ Grid

Every answer rendered and visible in a two-column description list — the FAQ shape for a marketing page, where collapsed text is text a search engine will not quote.

FAQ109 linesNo deps

Answers

Everything we get asked, sorted by what it is about

Billing

Can I change plans mid-cycle?

Yes, and the change takes effect immediately. Upgrades are prorated to the day; downgrades credit the unused remainder against your next invoice rather than refunding it.

What happens if a payment fails?

We retry on days 1, 3 and 7 and email you each time. Nothing is suspended until the fourth failure, and your data is retained for 30 days after that.

Do you offer annual invoicing?

On any plan, and it is the only option on Enterprise. Annual terms are billed once, so there is no recurring charge that can fail — which matters if your cards decline cross-border subscriptions.

Security

Where is our data stored?

In the region you pick at workspace creation: Virginia, Frankfurt or Sydney. It does not leave that region, including for backups, and the region cannot be changed later without a migration we run for you.

Are you SOC 2 compliant?

Type II, audited annually. The current report is available under NDA from the security page, along with our penetration test summary.

Can we bring our own encryption keys?

On Enterprise, via AWS KMS or Google Cloud KMS. Revoking the key makes the workspace unreadable to us within minutes.

Integrations

Does it work with our existing helpdesk?

There are first-party integrations for Zendesk, Intercom, Front and Help Scout, and a webhook plus REST API for anything else. Most teams run alongside their helpdesk for the first month rather than replacing it.

Is there an API rate limit?

600 requests a minute per workspace on paid plans, 60 on trials. Limits are per workspace rather than per key, so adding keys does not add capacity.

Support

What are your support hours?

Email is answered within one business day on every plan, including trials. Priority plans get four hours, and Enterprise gets a shared Slack channel with a one-hour target during your working day.

Do you help with migration?

Yes, at no charge, on any plan. Most migrations are an afternoon; we have never charged for one and do not intend to start.

FAQ Grouped by Topic

Anchor-linked topic pills over per-topic details groups with the first answer open — for the FAQ that outgrew a single list, working with JavaScript disabled.

FAQ237 lines1 dep13 Sept

Help

Search the questions

Can I change plans mid-cycle?

Yes, immediately. Upgrades are prorated to the day; downgrades credit the unused remainder against your next invoice rather than refunding it.

Do you support single sign-on?

SAML 2.0 and OIDC on Team and above, with SCIM provisioning on Enterprise. Okta, Entra ID, Google Workspace and JumpCloud are tested; anything standards-compliant should work.

How do you handle compliance?

SOC 2 Type II, audited annually, with the current report available under NDA. GDPR and UK GDPR as a processor, with a DPA you can sign from the billing page. HIPAA BAAs on Enterprise.

What is the API rate limit?

600 requests a minute per workspace on paid plans, 60 on trials. Limits are per workspace rather than per key, so adding keys does not add capacity.

Can we get a refund?

Within 30 days of a first purchase, no questions asked, on any plan. After that we credit rather than refund, except where local law says otherwise.

Where is our data stored?

In the region you pick at workspace creation: Virginia, Frankfurt or Sydney. It does not leave that region, including for backups.

Do you help with migration?

Yes, at no charge, on any plan. Most migrations take an afternoon and our exports import without a schema rewrite.

What happens when a trial ends?

The workspace becomes read-only rather than being deleted. Everything is still there for 30 days, and adding a card restores it instantly.

Filterable FAQ with Fallback

A search that narrows the list across answers and keywords, announces the count, and turns an empty result into the contact route it should always have been.

FAQ231 lines1 dep13 Sept

The awkward questions

Most FAQs answer what the company wishes it were asked. These are the four that actually decide it, including the one where the honest answer is no.

Objection FAQ

An FAQ written from the objections that stop a sale rather than from the questions that are comfortable to answer.

FAQ147 linesNo deps13 Sept

Security, answered properly

These four arrive in every procurement review. Answering them on a public page rather than in a questionnaire is worth about two weeks of a sales cycle.

Security FAQ

The security questions a buyer's IT reviewer asks, answered with scope and dates rather than with the word "enterprise-grade".

FAQ143 linesNo deps13 Sept