Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/anshuman008/faq-chat-accordionimport { 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 };