Components
Loading preview...
A comprehensive FAQ section component with animated accordions, gradient styling, and an optional contact prompt. Built with shadcn/ui primitives and Framer Motion animations. Features - Header Section - Gradient text title - Optional description - Animated entrance - FAQ Items - Animated accordions - Smooth transitions - Progressive reveal animation - Interactive hover states - Gradient backgrounds - Status indicators - Contact Section - Optional inclusion - Custom call-to-action - Animated entrance - Configurable content
@kokonutd
npx shadcn@latest add https://21st.dev/r/kokonutd/faqimport { FaqSection } from "@/components/blocks/faq";
const DEMO_FAQS = [
{
question: "What makes your platform unique?",
answer: "Our platform stands out through its intuitive design, powerful automation capabilities, and seamless integration options. We've focused on creating a user experience that combines simplicity with advanced features.",
},
{
question: "How does the pricing structure work?",
answer: "We offer flexible, transparent pricing tiers designed to scale with your needs. Each tier includes a core set of features, with additional capabilities as you move up. All plans start with a 14-day free trial.",
},
{
question: "What kind of support do you offer?",
answer: "We provide comprehensive support through multiple channels. This includes 24/7 live chat, detailed documentation, video tutorials, and dedicated account managers for enterprise clients.",
},
];
export function FaqSectionDemo() {
return (
<FaqSection
title="Frequently Asked Questions"
description="Everything you need to know about our platform"
items={DEMO_FAQS}
contactInfo={{
title: "Still have questions?",
description: "We're here to help you",
buttonText: "Contact Support",
onContact: () => console.log("Contact support clicked"),
}}
/>
);
}