FAQ Component Demo

Interactive FAQ components with smooth animations and accessibility features

Collapsible FAQ

Multiple FAQ items can be open simultaneously. Click on any question to expand or collapse the answer.

Accordion FAQ

Only one FAQ item can be open at a time. Opening a new item automatically closes the previous one.

Component Features

Smooth Animations

CSS transitions for smooth expand/collapse animations

Keyboard Navigation

Full keyboard support with Enter and Space keys

Accessibility

ARIA attributes and screen reader support

Dark Mode

Full dark mode support with proper contrast

Focus Management

Proper focus indicators and ring styles

TypeScript

Fully typed with TypeScript interfaces

How to Use

Collapsible FAQ

import CollapsibleFAQ from '@/components/ui/CollapsibleFAQ';

const items = [
  {
    question: "Your question here?",
    answer: "Your answer here."
  }
];

<CollapsibleFAQ items={items} />

Accordion FAQ

import { AccordionFAQ } from '@/components/ui/CollapsibleFAQ';

const items = [
  {
    question: "Your question here?",
    answer: "Your answer here."
  }
];

<AccordionFAQ items={items} />