@claricard/react

Drop-in FAQ components for React & Next.js, powered by Claricard. Ships with automatic FAQPage JSON-LD schema so AI search engines (ChatGPT, Perplexity, Google AI Overviews) attribute your FAQ content to your domain — something iframe embeds can't do.

npm install @claricard/react

Quick start

import { FAQ } from '@claricard/react'

export default function Page() {
  return <FAQ slug="your-faq-slug" />
}

That's it. Accordion UI + JSON-LD schema, both rendered in your page's DOM.

Headless — custom rendering

import { useFAQ, FAQSchema } from '@claricard/react'

function MyFAQ() {
  const { data, isLoading } = useFAQ('your-faq-slug')
  if (isLoading || !data) return null

  return (
    <>
      <FAQSchema faq={data} />
      {data.items.map((item) => (
        <MyAccordionItem key={item.position} q={item.question} a={item.answer} />
      ))}
    </>
  )
}

Theming

<FAQ
  slug="your-faq-slug"
  theme={{ accentColor: '#000', questionSize: 18 }}
  lang="ja" // on-the-fly translation: en, ko, ja, zh, es, fr, de
/>

Server-side (Next.js App Router)

For server components, fetch with @claricard/js and render statically:

import { getFAQ, toJsonLdString } from '@claricard/js'

export default async function Page() {
  const faq = await getFAQ('your-faq-slug')
  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: toJsonLdString(faq) }} />
      {/* render faq.items */}
    </>
  )
}