FAQ

A customizable FAQ component with accordion and grid examples, featuring smooth animations, optional search functionality, and responsive design.

Accordion View

Frequently Asked Questions

Find answers to common questions. Click on any question to expand.

This FAQ component features modern design with smooth animations, responsive layout, search functionality, and customizable color schemes. It's built with React and Tailwind CSS for optimal performance and beautiful aesthetics.

You can customize the color scheme by passing a 'colorScheme' prop with values like 'blue', 'purple', or 'green'. The component automatically applies gradients, hover effects, and accent colors based on your choice.

Absolutely! The component is fully responsive and works seamlessly across all device sizes. It features adaptive typography, flexible layouts, and touch-friendly interactions for mobile devices.

Grid View (custom)

What makes this FAQ component special?

How do I customize the color scheme?

Is the component mobile-responsive?

Absolutely! The component is fully responsive and works seamlessly across all device sizes. It features adaptive typography, flexible layouts, and touch-friendly interactions for mobile devices.

Usage

Props – FAQ

Prop	Type	Default	Required	Description
faqs	FAQItem[]	-	No	Array of FAQ objects with question and answer.
title	string	"Frequently Asked Questions"	No	Title of the FAQ section.
searchable	boolean	false	No	Enable/disable search functionality.
colorScheme	"blue" \| "purple" \| "green"	"blue"	No	Color scheme for styling.
className	string	-	No	Additional Tailwind CSS classes.

FAQItem Object

Prop	Type	Default	Required	Description
index	number	-	No	Optional index for display.
question	string	-	No	The FAQ question.
answer	string	-	No	The FAQ answer.