Skip to main content
Clever Ops

FAQ Carousel

One-question-at-a-time FAQ deck for React, editorial type, mono counter, hairline progress, strictly manual prev/next. A calm Tailwind alternative to accordion walls.

Preview & code

Loading FAQ Carousel preview

Installation

pnpm dlx shadcn@latest add @cleverui/faq-carousel

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

Usage

tsx
import { FaqCarousel } from '@/components/blocks/faq-carousel'
Exampletsx
import { FaqCarousel } from '@/components/blocks/faq-carousel'

export default function FaqCarouselDemo() {
  return (
    <div className="mx-auto w-full">
      <FaqCarousel
        eyebrow="You asked"
        defaultIndex={0}
        items={[
          {
            topic: 'Pricing',
            question: 'How does seat billing work after the trial?',
            answer:
              'Pro is $36 per editor seat per month when billed annually, or $44 monthly. Viewers are free and unlimited. Query minutes above the included 25,000 pool are $0.014 each, with a soft warning emailed at 80% so finance is never surprised.',
          },
          {
            topic: 'Trial',
            question: 'What do I keep 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 the public API pause until you upgrade. No credit card is required to start.',
          },
          {
            topic: 'Connectors',
            question: 'Can one workspace join Snowflake, BigQuery, and Postgres?',
            answer:
              'Yes. Harbor 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 without opening a support ticket.',
          },
          {
            topic: 'Security',
            question: 'Do you support SSO and SCIM for larger teams?',
            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, talk to sales if you need those before rollout.',
          },
          {
            topic: 'Data',
            question: 'Where is customer data stored, and can we pick a region?',
            answer:
              'Query results cache in the region you choose 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. Purge cache anytime from Settings → Data residency.',
          },
          {
            topic: 'Ops',
            question: 'What happens 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

FaqCarousel accepts the following props.

PropTypeDefaultDescription
eyebrowstring'You asked'mono micro-label above the deck, preceded by the primary tick
items*FaqCarouselItem[]
defaultIndexnumber0question shown on first render, SSR renders it in full
prevLabelstring'Previous question'aria-label for the previous control
nextLabelstring'Next question'aria-label for the next control

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

Referenced types

Typestsx
export interface FaqCarouselItem {
  question: string
  answer: string
  topic?: string
}

Frequently asked questions

How do I install the FAQ Carousel 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-carousel`. 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 Carousel require?

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

Can I theme FAQ Carousel 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