Faq section Blocks for Shadcn and Vue
Centered accordion
<script setup lang="ts">
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/vue/accordion'
interface Props {
title?: string
description?: string
faqs?: {
question: string
answer: string
}[]
footerText?: string
footerLink?: {
text: string
href: string
}
}
withDefaults(defineProps<Props>(), {
title: 'Frequently Asked Questions',
description: 'Everything you need to know about our product.',
faqs: () => [
{
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.',
},
],
footerText: 'Still have questions?',
footerLink: () => ({
text: 'Contact our support team',
href: '#',
}),
})
</script>
<template>
<section class="w-full bg-background py-12 md:py-16">
<div class="container mx-auto px-4 md:px-6">
<div class="mb-6 text-center md:mb-8">
<h2 class="text-2xl font-bold tracking-tight sm:text-3xl">
{{ title }}
</h2>
<p class="mt-2 text-sm text-muted-foreground md:mt-3">
{{ description }}
</p>
</div>
<div class="mx-auto max-w-3xl">
<Accordion type="single" collapsible>
<AccordionItem
v-for="(item, index) in faqs"
:key="index"
:value="`item-${index}`"
class="last:border-b-0"
>
<AccordionTrigger class="text-left font-semibold hover:no-underline">
{{ item.question }}
</AccordionTrigger>
<AccordionContent class="text-muted-foreground">
{{ item.answer }}
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
<div class="mt-6 text-center">
<p class="text-sm text-muted-foreground">
{{ footerText }}
<a
:href="footerLink.href"
class="font-medium underline underline-offset-4 hover:text-foreground transition-colors"
>
{{ footerLink.text }}
</a>
</p>
</div>
</div>
</section>
</template> Block details
This centered FAQ section uses Shadcn Vue Accordion components for a clean question and answer interface. Each item expands smoothly to show detailed responses, all arranged in a centered layout with a contact link.
| Dependency | Source |
|---|---|
| Accordion (shadcn-vue) | Registry |
Accordion with group
<script setup lang="ts">
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/vue/accordion'
interface Props {
title?: string
description?: string
faqGroups?: {
groupTitle: string
items: {
question: string
answer: string
}[]
}[]
footerText?: string
footerLink?: { text: string, href: string }
}
withDefaults(defineProps<Props>(), {
title: 'FAQs',
description:
'Find quick answers to common questions grouped by topic. Browse the categories on the right.',
faqGroups: () => [
{
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.' },
],
},
],
footerText: 'Need more help?',
footerLink: () => ({ text: 'Contact support', href: '#' }),
})
</script>
<template>
<section class="w-full bg-background py-8 md:py-10">
<div class="container mx-auto grid max-w-6xl gap-6 px-4 md:grid-cols-3 md:gap-8 md:px-6">
<div class="md:col-span-1">
<h2 class="text-2xl font-bold tracking-tight sm:text-3xl">
{{ title }}
</h2>
<p class="mt-2 text-sm text-muted-foreground md:mt-3">
{{ description }}
</p>
<div class="mt-6">
<p class="text-xs text-muted-foreground">
{{ footerText }}
<a
:href="footerLink.href"
class="font-medium underline underline-offset-4 hover:text-foreground transition-colors"
>
{{ footerLink.text }}
</a>
</p>
</div>
</div>
<div class="md:col-span-2">
<div v-for="(group, gIdx) in faqGroups" :key="gIdx" class="mb-6 last:mb-0">
<h3 class="mb-2 text-base font-semibold">
{{ group.groupTitle }}
</h3>
<Accordion type="single" collapsible class="space-y-2">
<AccordionItem
v-for="(item, idx) in group.items"
:key="idx"
:value="`g${gIdx}-i${idx}`"
class="last:border-b-0"
>
<AccordionTrigger class="py-3 text-left text-sm font-medium hover:no-underline">
{{ item.question }}
</AccordionTrigger>
<AccordionContent class="pb-3 text-sm text-muted-foreground">
{{ item.answer }}
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
</div>
</div>
</section>
</template> Block details
This FAQ groups section block uses Shadcn Vue Accordion components to organize questions into categorized sections. The two-column design displays topic groups on the right with introductory content and support links positioned on the left side.
| Dependency | Source |
|---|---|
| Accordion (shadcn-vue) | Registry |
Frequently asked questions
Can I customize the appearance of the accordion components?
Absolutely! Since we use Tailwind CSS and Shadcn Vue, you can easily modify colors, spacing, animations, and typography by updating the utility classes. The Shadcn Vue accordion base remains fully functional while allowing complete visual customization.
Are the faq section blocks free to use?
Yes. All our faq section blocks are free to use in personal and commercial projects.
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 Vue project. All components are built with Tailwind CSS and shadcn Vue, 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.