Skip to main content
Clever Ops

FAQ Split Detail

Master-detail FAQ for React, question rail on the left, full answer stage on the right, a sliding hairline marker and real arrow-key tab semantics. Tailwind, reading-first.

Preview & code

Loading FAQ Split Detail preview

Installation

pnpm dlx shadcn@latest add @cleverui/faq-split-detail

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

Usage

tsx
import { FaqSplitDetail } from '@/components/blocks/faq-split-detail'
Exampletsx
import { FaqSplitDetail } from '@/components/blocks/faq-split-detail'

export default function FaqSplitDetailDemo() {
  return (
    <div className="mx-auto w-full">
      <FaqSplitDetail
        heading="The questions we actually get"
        intro="Pick a question, the full answer, not a teaser."
        defaultIndex={0}
        items={[
          {
            topic: 'Billing',
            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 on every plan.',
              'Query minutes above the included 40,000 pool are $0.012 each. We send a soft warning at 80% of the included pool so finance is never surprised on the invoice.',
            ],
          },
          {
            topic: 'Trial',
            question: 'What happens when the 14-day trial ends?',
            answer:
              'Your workspace drops to Free automatically. Dashboards, saved queries, and team invites stay intact, only scheduled exports and API access pause until you upgrade. No credit card is required to start.',
          },
          {
            topic: 'Security',
            question: 'Do you support SSO and SCIM?',
            answer: [
              'SSO via Okta, Azure AD, and Google Workspace ships on Business. SCIM user provisioning, custom data-retention windows, and a signed BAA are available on Enterprise.',
              'Talk to sales if you need those controls before a company-wide rollout, we can stage a sandbox with your IdP in under a week.',
            ],
          },
          {
            topic: 'Connectors',
            question: 'Can we join Snowflake and BigQuery in one board?',
            answer:
              'Yes. Meridian treats each warehouse as a first-class source. You can join across them in the same board, set per-source credentials, and restrict which datasets a teammate can query without opening a ticket.',
          },
          {
            topic: 'Data',
            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.',
              'We retain query history for 90 days on Pro and 365 days on Business. Purge a workspace’s cache from Settings → Data residency at any time.',
            ],
          },
          {
            topic: 'Ops',
            question: 'What if a scheduled report fails overnight?',
            answer:
              'Failed runs retry twice with exponential backoff, then page the owners listed on the board. You’ll get an email with the failing step, the last successful snapshot, and a one-click re-run with last parameters.',
          },
        ]}
      />
    </div>
  )
}

API reference

FaqSplitDetail accepts the following props.

PropTypeDefaultDescription
headingstring'The questions we actually get'
introstringone sentence under the heading
items*FaqSplitDetailItem[]
defaultIndexnumber0question staged on first render, SSR renders its answer
headingLevel2 | 32

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

Referenced types

Typestsx
export interface FaqSplitDetailItem {
  question: string
  /** string = one paragraph; string[] = multiple paragraphs */
  answer: string | string[]
  /** mono micro-label above the staged answer, e.g. 'Billing' */
  topic?: string
}

Frequently asked questions

How do I install the FAQ Split Detail 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-split-detail`. 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 Split Detail require?

FAQ Split Detail 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 Split Detail 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