FAQ Chat Accordion | Community Components | 21st

FAQ Chat Accordion

FAQ Accordion component is a versatile and interactive UI element designed to display frequently asked questions in a collapsible format. It enhances user experience by allowing users to expand and collapse sections to view answers, making it ideal for FAQs, help sections, and more.

Features

Collapsible Sections: Users can expand or collapse sections to view or hide answers.
Animated Transitions: Smooth animations using Framer Motion for opening and closing sections.
Customizable Icons: Supports custom icons for each question, with flexible positioning.
Theming Support: Fully integrated with shadcn/ui theming for consistent styling.
Responsive Design: Adapts to different screen sizes for a seamless experience.
Accessible: Keyboard navigation and screen reader friendly.
Customizable Styles: Easily customize question and answer styles with className props.

Example Use Cases

FAQ Sections: Display frequently asked questions in a compact, user-friendly format.
Help Centers: Organize help topics and answers for easy navigation.
Product Details: Provide detailed product information in a structured manner.
Educational Content: Present educational material in a question-and-answer format.

❤️How late does the internet close?

The internet doesn't close. It's available 24/7.

Do I need a license to browse this website?

No, you don't need a license to browse this website.

What flavour are the cookies?

Our cookies are digital, not edible. They're used for website functionality.

⭐Can I get lost here?

Yes, but we do have a return policy.

What if I click the wrong button?

Don't worry, you can always go back or refresh the page.

Code Example

import { FaqAccordion } from "@/components/ui/faq-chat-accordion";

const defaultData = [
  {
    answer: "The internet doesn't close. It's available 24/7.",
    icon: "❤️",
    iconPosition: "right",
    id: 1,
    question: "How late does the internet close?",
  },
  {
    answer: "No, you don't need a license to browse this website.",
    id: 2,
    question: "Do I need a license to browse this website?",
  },
  {
    answer: "Our cookies are digital, not edible. They're used for website functionality.",
    id: 3,
    question: "What flavour are the cookies?",
  },
  {
    answer: "Yes, but we do have a return policy",
    icon: "⭐",
    iconPosition: "left",
    id: 4,
    question: "Can I get lost here?",
  },
  {
    answer: "Don't worry, you can always go back or refresh the page.",
    id: 5,
    question: "What if I click the wrong button?",
  },
];

function DefaultDemo() {
  return (
    <FaqAccordion
      data={defaultData}
      className="max-w-[700px]"
    />
  );
}

function CustomStyleDemo() {
  return (
    <FaqAccordion
      data={defaultData}
      className="max-w-[700px]"
      questionClassName="bg-secondary hover:bg-secondary/80"
      answerClassName="bg-secondary text-secondary-foreground"
      timestamp="Updated daily at 12:00 PM"
    />
  );
}

export { DefaultDemo, CustomStyleDemo };

Dependencies

Published

11/27/2024