caliper uidocs
DemoSign inGet Pro

FAQ block

Block

Searchable questions with one answer open at a time, each linking to the exact doc, and a way to ask when nothing matches.

Installs components/ui/faq-block.tsxDepends on lucide-reactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/faq-block.json

FAQ

Questions finance teams ask

Straight answers, each linked to the page that explains it in full.

Not here? Ask us about it

  • No. It prepares the close; your accountant reviews it and signs off, usually faster. How review works

When to use #

Use it for

  • Before the call to action, to answer the last objections.
  • Support keeps answering the same questions.

Skip it when

  • Content that belongs in the main page.
  • Over fifteen questions; link to the help centre.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/faq-block.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { type ReactNode } from "react"
import { FaqBlock } from "@/components/ui/faq-block"

function Frame({ children }: { children: ReactNode }) {
  return <div className="w-full overflow-hidden rounded-[14px] shadow-[0_0_0_1px_var(--border)]">{children}</div>;
}

const faqs: Parameters<typeof FaqBlock>[0] = { eyebrow: "FAQ", title: "Questions finance teams ask", lead: "Straight answers, each linked to the page that explains it in full.", ask: { label: "Ask us about it", href: "mailto:help@halden.app" }, items: [
    { question: "Does Halden replace our accountant?", answer: "No. It prepares the close; your accountant reviews it and signs off, usually faster.", doc: { label: "How review works", href: "#" } },
    { question: "Which banks and ledgers connect?", answer: "11,000 banks through Plaid, plus Xero, QuickBooks and NetSuite in both directions.", doc: { label: "Connections", href: "#" } },
    { question: "What if a match is wrong?", answer: "Undo it in one click. Halden learns from the correction for that vendor.", doc: { label: "Corrections", href: "#" } },
    { question: "Is our data used to train models?", answer: "Never. Your data is processed in eu-central-1 and deleted 30 days after you leave.", doc: { label: "Data processing terms", href: "#" } },
  ] };

export function FaqBlockDemo() {
  return <Frame><FaqBlock {...faqs} /></Frame>;
}

API reference #

FaqBlock

component
PropTypeDefaultDescription
eyebrowstring—
title *string—
leadstring—
items *readonly BlockFaq[]—
searchablebooleantrue
ask{ label: string; href: string; }—Where unanswered questions go, e.g. { label: "Ask us", href: "mailto:help@halden.app" }.
classNamestring—

Accessibility #

It exposes status semantics, with aria-hidden, aria-label, aria-live, aria-expanded and aria-controls kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.