// ui/faq/faq.tsx import { cn } from "@paubha/registry/lib/cn"; import * as React from "react"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "../accordion/accordion"; export interface FaqItem { question: React.ReactNode; answer: React.ReactNode; /** Stable value for AccordionItem; falls back to index. */ value?: string; } export interface FaqProps extends Omit, "title"> { title?: React.ReactNode; description?: React.ReactNode; items: FaqItem[]; /** Accordion type; defaults to single. */ type?: "single" | "multiple"; } /** * FAQ section · Accordion handles keyboard/ARIA · section labelled by title * when provided · focus rings come from AccordionTrigger */ export function Faq({ ref, className, title = "Frequently asked questions", description, items, type = "single", ...props }: FaqProps) { const headingId = React.useId(); const titleId = title != null ? headingId : undefined; const accordionClassName = cn("flex flex-col gap-2", title != null && "mt-8"); const accordionItems = items.map((item, i) => { const value = item.value ?? (typeof item.question === "string" ? item.question : `faq-${i}`); return ( {item.question} {item.answer} ); }); return (

{title != null ? (

{title}

) : null} {description != null ? (

{description}

) : null} {type === "multiple" ? ( {accordionItems} ) : ( {accordionItems} )}

); } Faq.displayName = "Faq"; // lib/cn.ts import { type ClassValue, clsx } from "clsx"; import { extendTailwindMerge } from "tailwind-merge"; // Our named type-scale utilities (text-ui-*, text-body-*, text-display-*) are custom // Tailwind v4 @theme tokens tailwind-merge doesn't know about out of the box. Without // this, it falls back to treating them as arbitrary text-color classes and silently // drops them whenever a real text-fg-* color class is merged in alongside. Every // component that pairs a type-scale class with a color class (the documented, required // pattern) loses its font-size/line-height/letter-spacing at runtime. const twMerge = extendTailwindMerge({ extend: { classGroups: { "font-size": [ { text: [ "ui-xs", "ui-sm", "ui-md", "ui-lg", "body-sm", "body-md", "body-lg", "display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl", ], }, ], }, }, }); export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }

FAQ

Frequently asked questions

Is Paubha really free?

Can we use it commercially?

Installation

Usage

On this page