Marketing block

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.

237 lineslucide-reactAdded 24 Aug 2026Updated 13 Sept 2026

faq
topics
categories
anchors
no-js

What's included

components/faq-categorized.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add faq-categorized

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

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.

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

Source

components/faq-categorized.tsx

/**
 * <FaqCategorized> — a long FAQ split into topics you can jump between.
 *
 * The three FAQ blocks already here all assume a list short enough to read
 * top to bottom. Past roughly fifteen questions that assumption breaks
 * whether the answers collapse or not: <FaqAccordion> becomes forty summary
 * lines to scan, <FaqGrid> becomes a wall, and neither gives the reader any
 * way to skip the twenty-eight questions that are not theirs.
 *
 * <FaqTwoColumn> also has a rail, but it holds a contact route — an offer of
 * help for the person whose question is not on the list. This one's nav is
 * navigation, for the person whose question *is* on the list and who cannot
 * find it. Different reader, different failure, different rail.
 *
 * The nav is anchor links and the sections are `<details>`, so the whole
 * block works with JavaScript disabled and every question is in the DOM for
 * search engines and Cmd-F. `scroll-mt` on each section keeps the heading
 * clear of a sticky site header after a jump — without it the anchor lands
 * with the topic name hidden behind the nav, which reads as the link having
 * missed.
 *
 * Topic ids come from `slugify(topic.name)`, so a topic renamed in the data
 * renames its anchor with it and the nav cannot point at a section that no
 * longer exists.
 *
 * `open` on the first question of each topic is deliberate. A jump that
 * lands on nothing but closed summaries makes the reader work twice; one
 * open answer confirms they arrived somewhere useful.
 */

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

export interface CategorizedQuestion {
  question: string
  answer: string
}

export interface FaqTopic {
  name: string
  questions: CategorizedQuestion[]
}

export interface FaqCategorizedProps {
  eyebrow?: string
  heading?: string
  topics?: FaqTopic[]
  /** Open each topic's first answer on arrival. See the note above. */
  openFirst?: boolean
  className?: string
}

/** Topic name → anchor id. One source for both the nav and the target. */
function slugify(value: string): string {
  return value
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-|-$/g, '')
}

const DEFAULT_TOPICS: FaqTopic[] = [
  {
    name: 'Billing',
    questions: [
      {
        question: 'Can I change plans mid-cycle?',
        answer:
          '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.',
      },
      {
        question: 'What happens if a payment fails?',
        answer:
          '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.',
      },
      {
        question: 'Do you offer annual invoicing?',
        answer:
          '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.',
      },
    ],
  },
  {
    name: 'Security',
    questions: [
      {
        question: 'Where is our data stored?',
        answer:
          '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.',
      },
      {
        question: 'Are you SOC 2 compliant?',
        answer:
          'Type II, audited annually. The current report is available under NDA from the security page, along with our penetration test summary.',
      },
      {
        question: 'Can we bring our own encryption keys?',
        answer:
          'On Enterprise, via AWS KMS or Google Cloud KMS. Revoking the key makes the workspace unreadable to us within minutes.',
      },
    ],
  },
  {
    name: 'Integrations',
    questions: [
      {
        question: 'Does it work with our existing helpdesk?',
        answer:
          '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.',
      },
      {
        question: 'Is there an API rate limit?',
        answer:
          '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.',
      },
    ],
  },
  {
    name: 'Support',
    questions: [
      {
        question: 'What are your support hours?',
        answer:
          '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.',
      },
      {
        question: 'Do you help with migration?',
        answer:
          'Yes, at no charge, on any plan. Most migrations are an afternoon; we have never charged for one and do not intend to start.',
      },
    ],
  },
]

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

  `useId` is the right answer and is not available here: this is a server
  component and hooks are not. The heading is what differs when a section is
  used twice on one page, so hashing it gives each copy its own
  `aria-labelledby` target 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 FaqCategorized({
  eyebrow = 'Answers',
  heading = 'Everything we get asked, sorted by what it is about',
  topics = DEFAULT_TOPICS,
  openFirst = true,
  className = '',
}: FaqCategorizedProps) {
  const headingId = `faq-categorized-heading-${instanceId(heading, eyebrow)}`

  return (
    <section
      aria-labelledby={headingId}
      className={`mx-auto w-full max-w-4xl px-4 py-16 sm:px-6 lg:px-8 ${className}`}
    >
      <div className="max-w-2xl">
        <p className="text-sm font-medium uppercase tracking-wider text-primary">{eyebrow}</p>
        <h2
          id={headingId}
          className="mt-3 text-balance text-3xl font-bold tracking-tight text-foreground sm:text-4xl"
        >
          {heading}
        </h2>
      </div>

      {/* Scrolls sideways on a phone rather than wrapping to four rows, which
          would push the first answer off the screen entirely. */}
      <nav aria-label="FAQ topics" className="mt-8 -mx-4 overflow-x-auto px-4 sm:mx-0 sm:px-0">
        <ul className="flex w-max gap-2 sm:w-auto sm:flex-wrap">
          {topics.map((topic) => (
            <li key={topic.name}>
              <a
                href={`#faq-${slugify(topic.name)}`}
                className="block rounded-full border border-border/60 px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-border hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
              >
                {topic.name}
                <span className="ms-2 text-xs tabular-nums text-muted-foreground/70">
                  {topic.questions.length}
                </span>
              </a>
            </li>
          ))}
        </ul>
      </nav>

      <div className="mt-12 space-y-12">
        {topics.map((topic) => {
          const slug = slugify(topic.name)
          return (
            <section key={topic.name} id={`${headingId}-faq-${slug}`} aria-labelledby={`${headingId}-faq-${slug}-heading`} className="scroll-mt-24">
              {topic.name ? (
                <h3
                  id={`${headingId}-faq-${slug}-heading`}
                  data-stress-ignore
                  className="text-sm font-semibold uppercase tracking-wider text-muted-foreground"
                >
                  {topic.name}
                </h3>
              ) : null}

              <div className="mt-4 divide-y divide-border/60 border-y border-border/60">
                {topic.questions.map((item, index) => (
                  <details
                    key={item.question}
                    name={`${headingId}-faq-${slug}`}
                    open={openFirst && index === 0}
                    className="group py-1"
                  >
                    <summary className="flex cursor-pointer list-none items-start justify-between gap-6 py-4 text-start font-medium text-foreground marker:content-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">
                      {item.question}
                      <Plus
                        aria-hidden
                        className="mt-0.5 h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-45"
                      />
                    </summary>
                    <p className="max-w-prose text-pretty pb-5 pe-10 leading-relaxed text-muted-foreground">
                      {item.answer}
                    </p>
                  </details>
                ))}
              </div>
            </section>
          )
        })}
      </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-categorized.tsx and import it where you need the section:

import { FaqCategorized } from '@/components/faq-categorized'

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
`eyebrow`	`string`	`'Answers'`
`heading`	`string`	`'Everything we get asked, sorted by what it i…`
`topics`	`FaqTopic[]`	`DEFAULT_TOPICS`
`openFirst`Open each topic's first answer on arrival. See the note above.	`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-categorized.html

<!--
  FAQ Grouped by Topic — 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 aria-labelledby="faq-categorized-heading-1xcv3f" class="mx-auto w-full max-w-4xl px-4 py-16 sm:px-6 lg:px-8 ">
  <div class="max-w-2xl">
    <p class="text-sm font-medium uppercase tracking-wider text-primary">Answers</p>
    <h2 id="faq-categorized-heading-1xcv3f" class="mt-3 text-balance text-3xl font-bold tracking-tight text-foreground sm:text-4xl">Everything we get asked, sorted by what it is about</h2>
  </div>
  <nav aria-label="FAQ topics" class="mt-8 -mx-4 overflow-x-auto px-4 sm:mx-0 sm:px-0">
    <ul class="flex w-max gap-2 sm:w-auto sm:flex-wrap">
      <li>
        <a href="#faq-billing" class="block rounded-full border border-border/60 px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-border hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Billing<span class="ms-2 text-xs tabular-nums text-muted-foreground/70">3</span></a>
      </li>
      <li>
        <a href="#faq-security" class="block rounded-full border border-border/60 px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-border hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Security<span class="ms-2 text-xs tabular-nums text-muted-foreground/70">3</span></a>
      </li>
      <li>
        <a href="#faq-integrations" class="block rounded-full border border-border/60 px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-border hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Integrations<span class="ms-2 text-xs tabular-nums text-muted-foreground/70">2</span></a>
      </li>
      <li>
        <a href="#faq-support" class="block rounded-full border border-border/60 px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-border hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Support<span class="ms-2 text-xs tabular-nums text-muted-foreground/70">2</span></a>
      </li>
    </ul>
  </nav>
  <div class="mt-12 space-y-12">
    <section id="faq-categorized-heading-1xcv3f-faq-billing" aria-labelledby="faq-categorized-heading-1xcv3f-faq-billing-heading" class="scroll-mt-24">
      <h3 id="faq-categorized-heading-1xcv3f-faq-billing-heading" data-stress-ignore="true" class="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Billing</h3>
      <div class="mt-4 divide-y divide-border/60 border-y border-border/60">
        <details name="faq-categorized-heading-1xcv3f-faq-billing" open="" class="group py-1">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-6 py-4 text-start font-medium text-foreground marker:content-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Can I change plans mid-cycle?<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 mt-0.5 h-5 w-5 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="max-w-prose text-pretty pb-5 pe-10 leading-relaxed text-muted-foreground">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.</p>
        </details>
        <details name="faq-categorized-heading-1xcv3f-faq-billing" class="group py-1">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-6 py-4 text-start font-medium text-foreground marker:content-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">What happens if a payment fails?<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 mt-0.5 h-5 w-5 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="max-w-prose text-pretty pb-5 pe-10 leading-relaxed text-muted-foreground">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.</p>
        </details>
        <details name="faq-categorized-heading-1xcv3f-faq-billing" class="group py-1">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-6 py-4 text-start font-medium text-foreground marker:content-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Do you offer annual invoicing?<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 mt-0.5 h-5 w-5 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="max-w-prose text-pretty pb-5 pe-10 leading-relaxed text-muted-foreground">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.</p>
        </details>
      </div>
    </section>
    <section id="faq-categorized-heading-1xcv3f-faq-security" aria-labelledby="faq-categorized-heading-1xcv3f-faq-security-heading" class="scroll-mt-24">
      <h3 id="faq-categorized-heading-1xcv3f-faq-security-heading" data-stress-ignore="true" class="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Security</h3>
      <div class="mt-4 divide-y divide-border/60 border-y border-border/60">
        <details name="faq-categorized-heading-1xcv3f-faq-security" open="" class="group py-1">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-6 py-4 text-start font-medium text-foreground marker:content-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Where is our data stored?<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 mt-0.5 h-5 w-5 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="max-w-prose text-pretty pb-5 pe-10 leading-relaxed text-muted-foreground">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.</p>
        </details>
        <details name="faq-categorized-heading-1xcv3f-faq-security" class="group py-1">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-6 py-4 text-start font-medium text-foreground marker:content-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Are you SOC 2 compliant?<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 mt-0.5 h-5 w-5 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="max-w-prose text-pretty pb-5 pe-10 leading-relaxed text-muted-foreground">Type II, audited annually. The current report is available under NDA from the security page, along with our penetration test summary.</p>
        </details>
        <details name="faq-categorized-heading-1xcv3f-faq-security" class="group py-1">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-6 py-4 text-start font-medium text-foreground marker:content-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Can we bring our own encryption keys?<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 mt-0.5 h-5 w-5 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="max-w-prose text-pretty pb-5 pe-10 leading-relaxed text-muted-foreground">On Enterprise, via AWS KMS or Google Cloud KMS. Revoking the key makes the workspace unreadable to us within minutes.</p>
        </details>
      </div>
    </section>
    <section id="faq-categorized-heading-1xcv3f-faq-integrations" aria-labelledby="faq-categorized-heading-1xcv3f-faq-integrations-heading" class="scroll-mt-24">
      <h3 id="faq-categorized-heading-1xcv3f-faq-integrations-heading" data-stress-ignore="true" class="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Integrations</h3>
      <div class="mt-4 divide-y divide-border/60 border-y border-border/60">
        <details name="faq-categorized-heading-1xcv3f-faq-integrations" open="" class="group py-1">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-6 py-4 text-start font-medium text-foreground marker:content-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Does it work with our existing helpdesk?<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 mt-0.5 h-5 w-5 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="max-w-prose text-pretty pb-5 pe-10 leading-relaxed text-muted-foreground">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.</p>
        </details>
        <details name="faq-categorized-heading-1xcv3f-faq-integrations" class="group py-1">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-6 py-4 text-start font-medium text-foreground marker:content-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Is there an API rate limit?<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 mt-0.5 h-5 w-5 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="max-w-prose text-pretty pb-5 pe-10 leading-relaxed text-muted-foreground">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.</p>
        </details>
      </div>
    </section>
    <section id="faq-categorized-heading-1xcv3f-faq-support" aria-labelledby="faq-categorized-heading-1xcv3f-faq-support-heading" class="scroll-mt-24">
      <h3 id="faq-categorized-heading-1xcv3f-faq-support-heading" data-stress-ignore="true" class="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Support</h3>
      <div class="mt-4 divide-y divide-border/60 border-y border-border/60">
        <details name="faq-categorized-heading-1xcv3f-faq-support" open="" class="group py-1">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-6 py-4 text-start font-medium text-foreground marker:content-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">What are your support hours?<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 mt-0.5 h-5 w-5 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="max-w-prose text-pretty pb-5 pe-10 leading-relaxed text-muted-foreground">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.</p>
        </details>
        <details name="faq-categorized-heading-1xcv3f-faq-support" class="group py-1">
          <summary class="flex cursor-pointer list-none items-start justify-between gap-6 py-4 text-start font-medium text-foreground marker:content-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Do you help with migration?<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 mt-0.5 h-5 w-5 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="max-w-prose text-pretty pb-5 pe-10 leading-relaxed text-muted-foreground">Yes, at no charge, on any plan. Most migrations are an afternoon; we have never charged for one and do not intend to start.</p>
        </details>
      </div>
    </section>
  </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

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.

No-JS FAQ Accordion

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

FAQ121 lines1 dep2 Sept

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

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