Overview
Frequently asked questions
Answer common questions with app-owned content while the block handles category navigation and disclosure UI.
Installation
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/faq-tabs.json"
Usage
<script setup lang="ts">
import { FaqTabs, type FaqTabsCategory } from '@/components/faq-tabs'
const categories: FaqTabsCategory[] = [
{
value: 'services',
label: 'Services',
items: [
{
value: 'services-offered',
question: 'What services do you offer?',
answers: [
'We design and ship Nuxt interfaces, registry blocks, and production-ready templates.',
'Your app keeps ownership of content, routes, analytics, and data loading.'
]
}
]
},
{
value: 'pricing',
label: 'Pricing',
items: [
{
value: 'project-cost',
question: 'How much does a typical project cost?',
answer: 'Pricing depends on scope, timeline, and integration work.'
}
]
}
]
</script>
<template>
<FaqTabs
title="Frequently asked questions"
description="Group common questions by topic without moving answer rendering into the block."
:categories="categories"
/>
</template>App-Owned Answers
FaqTabs renders plain answer strings by default. Use answer for a single paragraph or answers when paragraph boundaries matter.
The component intentionally does not render markdown, import Nuxt MDC, accept answerHtml, or use v-html. If your app needs rich answer content, render it through the scoped answer slot so markdown parsing and sanitization stay app-owned.
<FaqTabs :categories="categories">
<template #answer="{ item }">
<ProseContent :value="renderAnswer(item.value)" />
</template>
</FaqTabs>Examples
Categorized FAQ
Frequently asked questions
Answer common questions with app-owned content while the block handles category navigation and disclosure UI.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Optional section title. |
description | string | — | Optional supporting section copy. |
categories | FaqTabsCategory[] | null | [] | Categorized FAQ data supplied by your app. |
defaultCategoryValue | string | first category with items | Initial selected category. |
type | 'single' | 'multiple' | 'multiple' | Accordion expansion behavior inside each category. |
collapsible | boolean | false | Allows closing the open item when type is 'single'. |
class | string | — | Additional CSS classes for the section. |
Types
interface FaqTabsCategory {
value: string
label: string
items?: FaqTabsItem[]
}
interface FaqTabsItem {
value: string
question: string
answer?: string
answers?: string[]
}Slots
| Slot | Props | Description |
|---|---|---|
answer | { category: FaqTabsCategory, item: FaqTabsItem, categoryIndex: number, itemIndex: number } | Render rich answer content owned by your app. |