Skip to main content
Clever Ops

FAQ Topic Index

Grouped FAQ with a sticky topic index, scrollspy rail, anchor jumps, every answer visible in dl semantics. A documentation-grade FAQ section in React and Tailwind.

Preview & code

Loading FAQ Topic Index preview

Installation

pnpm dlx shadcn@latest add @cleverui/faq-topic-index

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { FaqTopicIndex } from '@/components/blocks/faq-topic-index'
Exampletsx
import { FaqTopicIndex } from '@/components/blocks/faq-topic-index'

export default function FaqTopicIndexDemo() {
  return (
    <div className="mx-auto w-full">
      <FaqTopicIndex
        heading="Everything, indexed"
        intro="Grouped by topic. Jump anywhere, nothing is collapsed."
        railLabel="Topics"
        groups={[
          {
            topic: 'Billing',
            items: [
              {
                question: 'How is Pro billed after the free tier?',
                answer:
                  'Pro is $48 per editor seat per month when billed annually, or $58 monthly. Viewers are free and unlimited. Query minutes above the included 40,000 pool are $0.012 each, with soft warnings at 80% of the included allotment.',
              },
              {
                question: 'Can I get a refund mid-cycle?',
                answer:
                  'Unused seats on annual plans credit to your next invoice within two business days. Cash refunds for monthly plans post to the original payment method in 5–10 business days depending on your bank.',
              },
              {
                question: 'Do you offer nonprofit or education pricing?',
                answer:
                  'Accredited nonprofits and universities receive 40% off Pro annual seats. Email education@ledgerly.app with proof of status; approval usually lands within two business days.',
              },
            ],
          },
          {
            topic: 'Security',
            items: [
              {
                question: 'Do you support SSO and SCIM?',
                answer:
                  'SSO via Okta, Azure AD, and Google Workspace ships on Business. SCIM user provisioning, custom retention windows, and a signed BAA are available on Enterprise.',
              },
              {
                question: 'Where is customer data stored?',
                answer:
                  'Query results cache in the region you pick at signup: us-east-1, eu-west-1, or ap-southeast-2. Raw warehouse credentials never leave your VPC when you run the private connector.',
              },
              {
                question: 'How are credentials encrypted?',
                answer:
                  'Credentials are encrypted at rest with per-workspace keys and never appear in query logs or support exports. Key rotation is automatic every 90 days on Business and above.',
              },
            ],
          },
          {
            topic: 'Onboarding',
            items: [
              {
                question: 'How long does a typical pilot take?',
                answer:
                  'Most teams connect their first warehouse and publish a shared board within one afternoon. Our guided checklist covers connectors, roles, and a sample dashboard you can fork.',
              },
              {
                question: 'Can we import boards from another tool?',
                answer:
                  'We accept Looker LookML exports and Metabase question JSON. Mapping takes a few minutes for small projects; larger estates get a white-glove migration with solutions engineering on Business.',
              },
              {
                question: 'Is there a sandbox for evaluating before buy-in?',
                answer:
                  'Yes, every trial is a full Pro sandbox with sample data and your own connectors. Nothing is shared with other tenants, and deleting the workspace purges credentials within 14 days.',
              },
            ],
          },
          {
            topic: 'Connectors',
            items: [
              {
                question: 'Which warehouses do you support today?',
                answer:
                  'Snowflake, BigQuery, Redshift, Postgres, MySQL, and Databricks. DuckDB files work for local demos. Private connector mode is available for VPC-only networks on Pro and above.',
              },
              {
                question: 'Can one board join multiple sources?',
                answer:
                  'Yes. Ledgerly treats each warehouse as a first-class source. You can join across them on the same board, set per-source credentials, and restrict which datasets a teammate can query.',
              },
            ],
          },
        ]}
      />
    </div>
  )
}

API reference

FaqTopicIndex accepts the following props.

PropTypeDefaultDescription
headingstring'Everything, indexed'
introstringone sentence under the heading
groups*FaqTopicIndexGroup[]2–5 topic groups; every answer renders visible
railLabelstring'Topics'mono micro-label above the index rail
headingLevel2 | 32

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx
export interface FaqTopicIndexGroup {
  topic: string
  items: FaqTopicIndexItem[]
}

export interface FaqTopicIndexItem {
  question: string
  answer: string
}

Frequently asked questions

How do I install the FAQ Topic Index component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/faq-topic-index`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does FAQ Topic Index require?

FAQ Topic Index uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme FAQ Topic Index to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services