From 1cabafd7ed1dad904799b4ce2e4a3a3cbaca3efc Mon Sep 17 00:00:00 2001
From: Hirotaka Mizutani <52546+hirotaka@users.noreply.github.com>
Date: Sat, 27 Jun 2026 23:33:22 +0900
Subject: [PATCH] feat(registry): Add faq tabs block

---
 app/components/demo/FaqTabsDemo.vue           |  52 ++++++
 app/components/ui/accordion/Accordion.vue     |  19 ++
 .../ui/accordion/AccordionContent.vue         |  23 +++
 app/components/ui/accordion/AccordionItem.vue |  23 +++
 .../ui/accordion/AccordionTrigger.vue         |  30 +++
 app/components/ui/accordion/index.ts          |   4 +
 app/registry/blocks/faq-tabs/FaqTabs.vue      | 174 ++++++++++++++++++
 app/registry/blocks/faq-tabs/index.ts         |   1 +
 content/docs/2.components/15.faq-tabs.md      | 122 ++++++++++++
 scripts/registry-verify.ts                    |   4 +
 10 files changed, 452 insertions(+)
 create mode 100644 app/components/demo/FaqTabsDemo.vue
 create mode 100644 app/components/ui/accordion/Accordion.vue
 create mode 100644 app/components/ui/accordion/AccordionContent.vue
 create mode 100644 app/components/ui/accordion/AccordionItem.vue
 create mode 100644 app/components/ui/accordion/AccordionTrigger.vue
 create mode 100644 app/components/ui/accordion/index.ts
 create mode 100644 app/registry/blocks/faq-tabs/FaqTabs.vue
 create mode 100644 app/registry/blocks/faq-tabs/index.ts
 create mode 100644 content/docs/2.components/15.faq-tabs.md

diff --git a/app/components/demo/FaqTabsDemo.vue b/app/components/demo/FaqTabsDemo.vue
new file mode 100644
index 0000000..b702acc
--- /dev/null
+++ b/app/components/demo/FaqTabsDemo.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { FaqTabs, type FaqTabsCategory } from "~/registry/blocks/faq-tabs";
+
+const categories: FaqTabsCategory[] = [
+  {
+    value: "services",
+    label: "Services",
+    items: [
+      {
+        value: "services-offered",
+        question: "What services do you offer?",
+        answers: [
+          "We help teams design and ship Nuxt interfaces, registry blocks, and production-ready templates.",
+          "Your app keeps ownership of content, routes, analytics, and any data loading behavior.",
+        ],
+      },
+      {
+        value: "startup-fit",
+        question: "Do you work with early-stage teams?",
+        answer: "Yes. The block works well for compact launch pages, pricing pages, and support sections where users need quick answers.",
+      },
+    ],
+  },
+  {
+    value: "pricing",
+    label: "Pricing",
+    items: [
+      {
+        value: "project-cost",
+        question: "How much does a typical project cost?",
+        answer: "Pricing depends on scope, timeline, and required integration work. Most teams start with a focused design and implementation sprint.",
+      },
+      {
+        value: "retainers",
+        question: "Do you offer ongoing support?",
+        answer: "Yes. Retainers are a good fit when your team needs recurring design systems work, documentation, or registry maintenance.",
+      },
+    ],
+  },
+];
+</script>
+
+<template>
+  <div class="rounded-xl border bg-muted/20 p-4 sm:p-6">
+    <FaqTabs
+      title="Frequently asked questions"
+      description="Answer common questions with app-owned content while the block handles category navigation and disclosure UI."
+      :categories="categories"
+      class="py-0"
+    />
+  </div>
+</template>
diff --git a/app/components/ui/accordion/Accordion.vue b/app/components/ui/accordion/Accordion.vue
new file mode 100644
index 0000000..50b5c9d
--- /dev/null
+++ b/app/components/ui/accordion/Accordion.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from "reka-ui";
+import { AccordionRoot, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<AccordionRootProps>();
+const emits = defineEmits<AccordionRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <AccordionRoot
+    v-slot="slotProps"
+    data-slot="accordion"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionRoot>
+</template>
diff --git a/app/components/ui/accordion/AccordionContent.vue b/app/components/ui/accordion/AccordionContent.vue
new file mode 100644
index 0000000..8460e64
--- /dev/null
+++ b/app/components/ui/accordion/AccordionContent.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AccordionContent } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <AccordionContent
+    data-slot="accordion-content"
+    v-bind="delegatedProps"
+    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+  >
+    <div :class="cn('pt-0 pb-4', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>
diff --git a/app/components/ui/accordion/AccordionItem.vue b/app/components/ui/accordion/AccordionItem.vue
new file mode 100644
index 0000000..22c7b9b
--- /dev/null
+++ b/app/components/ui/accordion/AccordionItem.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { AccordionItem, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <AccordionItem
+    v-slot="slotProps"
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('border-b last:border-b-0', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionItem>
+</template>
diff --git a/app/components/ui/accordion/AccordionTrigger.vue b/app/components/ui/accordion/AccordionTrigger.vue
new file mode 100644
index 0000000..c3954df
--- /dev/null
+++ b/app/components/ui/accordion/AccordionTrigger.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { ChevronDown } from "lucide-vue-next";
+import { reactiveOmit } from "@vueuse/core";
+import { AccordionHeader, AccordionTrigger } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="delegatedProps"
+      :class="cn(
+        'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+        props.class,
+      )"
+    >
+      <slot />
+      <slot name="icon">
+        <ChevronDown class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>
diff --git a/app/components/ui/accordion/index.ts b/app/components/ui/accordion/index.ts
new file mode 100644
index 0000000..92efaba
--- /dev/null
+++ b/app/components/ui/accordion/index.ts
@@ -0,0 +1,4 @@
+export { default as Accordion } from "./Accordion.vue";
+export { default as AccordionContent } from "./AccordionContent.vue";
+export { default as AccordionItem } from "./AccordionItem.vue";
+export { default as AccordionTrigger } from "./AccordionTrigger.vue";
diff --git a/app/registry/blocks/faq-tabs/FaqTabs.vue b/app/registry/blocks/faq-tabs/FaqTabs.vue
new file mode 100644
index 0000000..c17ac85
--- /dev/null
+++ b/app/registry/blocks/faq-tabs/FaqTabs.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed } from "vue";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+export interface FaqTabsItem {
+  /** Stable id for the accordion item. */
+  value: string;
+  /** Visible question text. */
+  question: string;
+  /** Plain text answer for simple one-paragraph FAQs. */
+  answer?: string;
+  /** Plain text answer paragraphs when paragraph boundaries matter. */
+  answers?: string[];
+}
+
+export interface FaqTabsCategory {
+  /** Stable id for the tab value. */
+  value: string;
+  /** Visible tab label. */
+  label: string;
+  /** FAQ items supplied by the consuming app. */
+  items?: FaqTabsItem[];
+}
+
+export interface FaqTabsProps {
+  /** Optional section title. */
+  title?: string;
+  /** Optional supporting section copy. */
+  description?: string;
+  /** Categorized FAQ data supplied by the consuming app. */
+  categories?: FaqTabsCategory[] | null;
+  /** Initial selected category. Falls back to the first category with items. */
+  defaultCategoryValue?: string;
+  /** Accordion expansion behavior for each category. */
+  type?: "single" | "multiple";
+  /** Allows the open item to close when type is single. */
+  collapsible?: boolean;
+  /** Additional CSS classes for the section. */
+  class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<FaqTabsProps>(), {
+  categories: () => [],
+  type: "multiple",
+  collapsible: false,
+});
+
+const categoriesWithItems = computed(() => {
+  return (props.categories ?? []).filter(category => (category.items?.length ?? 0) > 0);
+});
+
+const defaultCategory = computed(() => {
+  if (props.defaultCategoryValue && categoriesWithItems.value.some(category => category.value === props.defaultCategoryValue)) {
+    return props.defaultCategoryValue;
+  }
+
+  return categoriesWithItems.value[0]?.value;
+});
+
+const hasHeader = computed(() => Boolean(props.title || props.description));
+const hasContent = computed(() => hasHeader.value || categoriesWithItems.value.length > 0);
+
+function itemAnswers(item: FaqTabsItem) {
+  if (item.answers?.length) return item.answers;
+  if (item.answer) return [item.answer];
+  return [];
+}
+</script>
+
+<template>
+  <section
+    v-if="hasContent"
+    data-slot="faq-tabs"
+    :class="cn('py-12 md:py-16', props.class)"
+  >
+    <div class="mx-auto w-full max-w-4xl px-4 sm:px-6 lg:px-8">
+      <div
+        v-if="hasHeader"
+        data-slot="faq-tabs-header"
+        class="max-w-2xl"
+      >
+        <h2
+          v-if="title"
+          data-slot="faq-tabs-title"
+          class="text-balance text-3xl font-semibold tracking-tight sm:text-4xl"
+        >
+          {{ title }}
+        </h2>
+        <p
+          v-if="description"
+          data-slot="faq-tabs-description"
+          class="mt-4 text-pretty text-base/7 text-muted-foreground"
+        >
+          {{ description }}
+        </p>
+      </div>
+
+      <Tabs
+        v-if="defaultCategory"
+        :default-value="defaultCategory"
+        :class="cn(hasHeader && 'mt-8')"
+      >
+        <TabsList class="flex h-auto flex-wrap justify-start gap-2 bg-transparent p-0">
+          <TabsTrigger
+            v-for="category in categoriesWithItems"
+            :key="category.value"
+            :value="category.value"
+            class="data-[state=active]:bg-muted hover:bg-muted/60 h-auto rounded-lg border px-3 py-2 text-sm text-muted-foreground shadow-none data-[state=active]:text-foreground data-[state=active]:shadow-none"
+          >
+            {{ category.label }}
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent
+          v-for="(category, categoryIndex) in categoriesWithItems"
+          :key="category.value"
+          :value="category.value"
+          class="mt-5"
+        >
+          <Accordion
+            :type="type"
+            :collapsible="type === 'single' ? collapsible : undefined"
+            class="space-y-3"
+          >
+            <AccordionItem
+              v-for="(item, itemIndex) in category.items"
+              :key="item.value"
+              :value="item.value"
+              class="rounded-2xl border bg-card/70 px-4"
+            >
+              <AccordionTrigger class="py-4 text-base hover:no-underline">
+                {{ item.question }}
+              </AccordionTrigger>
+              <AccordionContent class="text-sm/6 text-muted-foreground">
+                <slot
+                  v-if="$slots.answer"
+                  name="answer"
+                  :category="category"
+                  :item="item"
+                  :category-index="categoryIndex"
+                  :item-index="itemIndex"
+                />
+                <div
+                  v-else
+                  class="space-y-3"
+                >
+                  <p
+                    v-for="answer in itemAnswers(item)"
+                    :key="answer"
+                  >
+                    {{ answer }}
+                  </p>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </TabsContent>
+      </Tabs>
+    </div>
+  </section>
+</template>
diff --git a/app/registry/blocks/faq-tabs/index.ts b/app/registry/blocks/faq-tabs/index.ts
new file mode 100644
index 0000000..7e878a4
--- /dev/null
+++ b/app/registry/blocks/faq-tabs/index.ts
@@ -0,0 +1 @@
+export { default as FaqTabs, type FaqTabsCategory, type FaqTabsItem, type FaqTabsProps } from "./FaqTabs.vue";
diff --git a/content/docs/2.components/15.faq-tabs.md b/content/docs/2.components/15.faq-tabs.md
new file mode 100644
index 0000000..91abc4a
--- /dev/null
+++ b/content/docs/2.components/15.faq-tabs.md
@@ -0,0 +1,122 @@
+---
+title: FaqTabs
+description: Render categorized FAQ sections while keeping answer content in your app.
+category: marketing
+---
+
+::component-preview
+---
+name: FaqTabsDemo
+---
+::
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add "https://ui.stackhacker.io/r/faq-tabs.json"
+```
+
+## Usage
+
+```vue
+<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.
+
+```vue
+<FaqTabs :categories="categories">
+  <template #answer="{ item }">
+    <ProseContent :value="renderAnswer(item.value)" />
+  </template>
+</FaqTabs>
+```
+
+## Examples
+
+### Categorized FAQ
+
+::component-preview
+---
+name: FaqTabsDemo
+---
+::
+
+## 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
+
+```ts
+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. |
diff --git a/scripts/registry-verify.ts b/scripts/registry-verify.ts
index 6a47a3a..8a3a26d 100644
--- a/scripts/registry-verify.ts
+++ b/scripts/registry-verify.ts
@@ -139,6 +139,10 @@ const expectedItems: Record<string, ExpectedRegistryItem> = {
     dependencies: [],
     registryDependencies: [],
   },
+  "faq-tabs": {
+    dependencies: [],
+    registryDependencies: ["accordion", "tabs"],
+  },
 };
 
 if (registryIndex) {