Skip to main content
Clever Ops

FAQ Disclosure List

The accordion FAQ perfected, real disclosure semantics over hairline rows, mono two-digit numbering earned by most-asked order, multi-paragraph answers, optional single-open.

Preview & code

Loading FAQ Disclosure List preview

Installation

pnpm dlx shadcn@latest add @cleverui/faq-disclosure-list

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

Usage

tsx
import { FaqDisclosureList } from '@/components/blocks/faq-disclosure-list'
Exampletsx
import { FaqDisclosureList } from '@/components/blocks/faq-disclosure-list'

export default function FaqDisclosureListDemo() {
  return (
    <div className="mx-auto w-full">
      <FaqDisclosureList
        heading="Frequently asked questions"
        intro="Ordered by how often Northline customers actually ask, most-asked first."
        defaultOpen={0}
        items={[
          {
            question: 'How long does a trial last, and what do I keep after it ends?',
            answer: [
              'The free trial runs for 14 days with full access to Pro features, including warehouse connectors and shared workspaces. No credit card is required to start.',
              'When the trial ends, your workspace drops to the Free plan. Dashboards, saved queries, and team invites stay intact, only scheduled exports and API access pause until you upgrade.',
            ],
          },
          {
            question: 'Can we connect Snowflake, BigQuery, and Postgres in one workspace?',
            answer:
              'Yes. Northline 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.',
          },
          {
            question: 'How is usage 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/month are $0.012 each. We send a soft warning at 80% of the included pool so finance is never surprised on the invoice.',
            ],
          },
          {
            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 data-retention windows, and a signed BAA are available on Enterprise, talk to sales if you need those before rollout.',
          },
          {
            question: 'Where is customer data stored, and can we choose a region?',
            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. You can purge a workspace’s cache from Settings → Data residency at any time.',
            ],
          },
          {
            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” action.',
          },
        ]}
      />
    </div>
  )
}

API reference

FaqDisclosureList accepts the following props.

PropTypeDefaultDescription
headingstring'Frequently asked questions'
introstringone sentence setting expectations for the list
items*FaqDisclosureItem[]ordered most-asked first, the mono index states that order
singleOpenbooleanfalseopening a row closes the others
defaultOpennumberindex open on first render (SSR); omit or pass -1 for fully closed
headingLevel2 | 32

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

Referenced types

Typestsx
export interface FaqDisclosureItem {
  question: string
  /** string answer = one paragraph; string[] = multiple paragraphs */
  answer: string | string[]
}

Frequently asked questions

How do I install the FAQ Disclosure List 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-disclosure-list`. 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 Disclosure List require?

FAQ Disclosure List 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 Disclosure List 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