An interactive FAQ index with instant text search, category pills, and collapsible answers. Useful for help centers, product FAQs, and customer support documentation.
"use client";
import React from "react";
import SearchableQuestionIndex, { QuestionItem } from "@/components/ui/searchable-question-index";
const items: QuestionItem[] = [
{
id: "getting-started-install",
category: "General",
question: "How do I install the component library?",
answer: "You can install any component directly using the 21st.dev CLI command with npx @21st-dev/cli add <component-name>, or copy-paste the component file directly into your project.",
},
{
id: "billing-refunds",
category: "Billing",
question: "What is your refund policy?",
answer: "We offer a 14-day no-questions-asked refund policy for all annual subscriptions. Monthly plans can be cancelled anytime without further charges.",
},
{
id: "security-encryption",
category: "Security",
question: "Is data encrypted at rest and in transit?",
answer: "Yes, all data is encrypted in transit using TLS 1.3 and at rest using AES-256 encryption. We regularly conduct external security audits and penetration tests.",
},
{
id: "account-seats",
category: "Account",
question: "Can I add multiple team members to my organization?",
answer: "Team accounts allow inviting unlimited collaborators with fine-grained role-based access control, including Admin, Editor, and Viewer permissions.",
},
{
id: "billing-invoices",
category: "Billing",
question: "Where can I download my tax invoices?",
answer: "Tax invoices and receipts are automatically sent to your billing email address and are also available for download in the Billing tab of your Organization settings.",
},
];
export default function SearchableQuestionIndexDemo() {
return (
<div className="flex w-full items-center justify-center p-4 md:p-8 min-h-[550px]">
<SearchableQuestionIndex
title="Knowledge Base & FAQ"
placeholder="Type keywords to search articles…"
items={items}
/>
</div>
);
}