FAQ List

This is a FAQ List component.

Installation

1. Dependencies

npm install clsx tailwind-merge framer-motion react-icons

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy FAQ List Code

Copy FAQ List Code

FAQList Props

Name	Type	Required	Default	Description
children	React.ReactElement[]	Yes	undefined	The FAQItem components to display.

FAQItem Props

Name	Type	Required	Default	Description
question	string	Yes	undefined	The question to display.
answer	string	Yes	undefined	The answer to display.
index	number	No	undefined	The index of the item in the list.
isOpen	boolean	No	false	Whether the item is open or closed.
onToggle	() => void	No	undefined	Function to toggle the item's open state.
className	string	No	undefined	Additional class names for styling.