Faq section Blocks and Components for Shadcn React
Centered accordion
Freeimport {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/react/accordion'
interface Props {
title?: string
description?: string
faqs?: {
question: string
answer: string
}[]
footerText?: string
footerLink?: string
footerLinkText?: string
}
const sampleFaqs = [
{
question: 'What is your return policy?',
answer:
'We offer a 30-day return policy for all unused items in their original packaging. Simply contact our support team to initiate the process.',
},
{
question: 'How long does shipping take?',
answer:
'Standard shipping takes 5-7 business days. Express options are available at checkout for 2-3 day delivery.',
},
{
question: 'Do you offer international shipping?',
answer:
'Yes, we ship to over 50 countries worldwide. International shipping times vary by location and customs processing.',
},
{
question: 'How can I track my order?',
answer:
'Once your order ships, you\'ll receive an email with a tracking number. You can also log into your account to view order status.',
},
{
question: 'What payment methods do you accept?',
answer:
'We accept all major credit cards, PayPal, Apple Pay, and Google Pay. All transactions are secured with SSL encryption.',
},
]
export default function FAQSection({
title = 'Frequently Asked Questions',
description = 'Everything you need to know about our product.',
faqs = sampleFaqs,
footerText = 'Still have questions?',
footerLink = '#',
footerLinkText = 'Contact our support team',
}: Props) {
return (
<section className="w-full bg-background py-12 md:py-16">
<div className="container mx-auto px-4 md:px-6">
<div className="mb-6 text-center md:mb-8">
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">{title}</h2>
<p className="mt-2 text-sm text-muted-foreground md:mt-3">{description}</p>
</div>
<div className="mx-auto max-w-3xl">
<Accordion type="single" collapsible>
{faqs.map((item, index) => (
<AccordionItem key={item.question} value={`item-${index}`}>
<AccordionTrigger className="font-semibold hover:no-underline">
{item.question}
</AccordionTrigger>
<AccordionContent className="text-muted-foreground">
{item.answer}
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
<div className="mt-6 text-center">
<p className="text-sm text-muted-foreground">
{footerText}
<a
href={footerLink}
className="ml-1 font-medium underline underline-offset-4 hover:text-foreground transition-colors"
>
{footerLinkText}
</a>
</p>
</div>
</div>
</section>
)
} Block details
This centered accordion FAQ section uses Shadcn Accordion components to create a collapsible question and answer layout. The centered design features expandable items that reveal detailed answers, with a support link below for additional assistance.
Block dependencies
| Dependency | Source |
|---|---|
| Accordion (shadcn) | Registry |
Accordion with group
Freeimport {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/react/accordion'
interface Props {
title?: string
description?: string
faqGroups?: {
groupTitle: string
items: {
question: string
answer: string
}[]
}[]
footerText?: string
footerLink?: string
footerLinkText?: string
}
const sampleFaqGroups = [
{
groupTitle: 'General',
items: [
{ question: 'What is your return policy?', answer: '30-day returns on unused items.' },
{ question: 'How long does shipping take?', answer: '5-7 business days standard.' },
],
},
{
groupTitle: 'Payment & Security',
items: [
{ question: 'What payment methods are accepted?', answer: 'Cards, PayPal, Apple Pay, Google Pay.' },
{ question: 'Is checkout secure?', answer: 'Yes, SSL encrypted and PCI compliant.' },
],
},
]
export default function FAQSection({
title = 'FAQs',
description = 'Find quick answers to common questions grouped by topic. Browse the categories on the right.',
faqGroups = sampleFaqGroups,
footerText = 'Need more help?',
footerLink = '#',
footerLinkText = 'Contact support',
}: Props) {
return (
<section className="w-full bg-background py-8 md:py-10">
<div className="container mx-auto grid max-w-6xl gap-6 px-4 md:grid-cols-3 md:gap-8 md:px-6">
<div className="md:col-span-1">
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">{title}</h2>
<p className="mt-2 text-sm text-muted-foreground md:mt-3">{description}</p>
<div className="mt-6">
<p className="text-xs text-muted-foreground">
{footerText}
<a
href={footerLink}
className="ml-1 font-medium underline underline-offset-4 hover:text-foreground transition-colors"
>
{footerLinkText}
</a>
</p>
</div>
</div>
<div className="md:col-span-2">
{faqGroups.map((group, gIdx) => (
<div key={group.groupTitle} className="mb-6 last:mb-0">
<h3 className="mb-2 text-base font-semibold">{group.groupTitle}</h3>
<Accordion type="single" collapsible className="space-y-2">
{group.items.map((item, idx) => (
<AccordionItem key={item.question} value={`g${gIdx}-i${idx}`} className="last:border-b-0">
<AccordionTrigger className="py-3 text-left text-sm font-medium hover:no-underline">
{item.question}
</AccordionTrigger>
<AccordionContent className="pb-3 text-sm text-muted-foreground">
{item.answer}
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
))}
</div>
</div>
</section>
)
} Block details
This responsive layout accordion with FAQ groups block implements Shadcn Accordion components to present categorized questions in a structured two-column format. Topic groups appear in the right column while descriptive text and contact information occupy the left side, creating an organized FAQ browsing experience.
Block dependencies
| Dependency | Source |
|---|---|
| Accordion (shadcn) | Registry |
Frequently asked questions
How are the FAQ accordion sections implemented?
We use Shadcn UI's accordion component built on Radix UI, providing accessible expand/collapse functionality with smooth animations and keyboard navigation.
How accessible are these FAQ accordion sections?
Very accessible! The Shadcn accordion component includes proper ARIA attributes, keyboard navigation support, and screen reader compatibility. Each FAQ block follows WCAG 2.1 guidelines for maximum accessibility.
Can I add icons or modify the expand/collapse indicators?
Yes, the Shadcn accordion components support custom icons and indicators. You can easily replace the default chevron icons with plus/minus icons or any other SVG elements to match your design system.
Are the faq section blocks free to use?
We offer both free and premium faq section blocks. The free blocks are completely free to use in personal and commercial projects. Premium blocks require a one-time purchase for access to more advanced designs.
How do I use these faq section blocks in my project?
Simply browse our collection, click on the "Copy Code" button for your chosen block, and paste it into your Shadcn React project. All components are built with Tailwind CSS & Shadcn React, so they'll work seamlessly with your existing setup.
Can I customize the faq section blocks?
Absolutely! All our faq section blocks are fully customizable. You can easily modify colors, spacing, typography, and layout by adjusting the Tailwind CSS classes in the component code.