"use client"; import { useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { ChevronDown } from "lucide-react"; import { cn } from "@/lib/utils"; export interface FaqItem { question: string; answer: string; } export function FaqAccordion({ items, className, }: { items: FaqItem[]; className?: string; }) { const [open, setOpen] = useState(0); return (

{items.map((item, i) => { const isOpen = open === i; return (

{isOpen && (

{item.answer}

)}

); })}

); } const demoItems: FaqItem[] = [ { question: "Can I use these components in commercial projects?", answer: "Yes, every free and pro component ships with a license that covers unlimited commercial projects.", }, { question: "Do I need Tailwind v4?", answer: "Components are written against Tailwind v4 tokens. They can be adapted to v3, but v4 is required for the design tokens out of the box.", }, { question: "Is framer-motion required?", answer: "Yes, most components rely on framer-motion for their animation logic. It's a lightweight, well-maintained dependency.", }, { question: "What's the difference between free and pro?", answer: "Free components are open for anyone. Pro components include more advanced interaction patterns like drag, 3D, and physics-based effects.", }, ]; export default function Demo() { return (

); }

FAQ Accordion