# Faq 10

A shadcn/ui block from the [@diarmuradi](https://diarmuradi.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/diarmuradi/faq-10).

- Page, with a live preview: https://shadcn.exchange/r/diarmuradi/faq-10
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/diarmuradi/faq-10-light-c6af48b1fa96322d.png
- Registry item: https://diarmuradi.com/r/faq-10.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://diarmuradi.com/r/faq-10.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://diarmuradi.com/r/styles/base-nova/accordion.json`, `https://diarmuradi.com/r/styles/base-nova/badge.json`, `https://diarmuradi.com/r/styles/base-nova/fancy-button.json`

## Files

### `faq.tsx`

```tsx
"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Badge } from "@/components/ui/badge"
import { FancyButton } from "@/components/ui/fancy-button"

type FaqItem = {
  value: string
  question: string
  answer: string
}

type FaqCategory = {
  label: string
  description: string
  items: FaqItem[]
}

const categories: FaqCategory[] = [
  {
    label: "Account",
    description: "Manage profile & settings.",
    items: [
      {
        value: "item-1",
        question: "How do I change my email address?",
        answer:
          "You can update your email address in your account settings. We'll send a verification link to confirm the change.",
      },
      {
        value: "item-2",
        question: "Can I update my payment details online?",
        answer:
          "Yes, you can update your payment information anytime in the billing section of your account settings.",
      },
      {
        value: "item-3",
        question: "What should I do if I forget my password?",
        answer:
          "Click 'Forgot Password' on the login page and follow the reset instructions sent to your email.",
      },
    ],
  },
  {
    label: "Payments",
    description: "All about transactions.",
    items: [
      {
        value: "item-4",
        question: "How long does it take to process a payment?",
        answer:
          "Most payments are processed within 1-2 business days depending on your payment method.",
      },
      {
        value: "item-5",
        question: "Are refunds handled automatically?",
        answer:
          "Yes, refunds are processed automatically and typically appear in your account within 3-5 business days.",
      },
    ],
  },
  {
    label: "Support",
    description: "Get help when needed.",
    items: [
      {
        value: "item-6",
        question: "How can I contact customer support?",
        answer:
          "You can reach our support team via live chat, email, or phone. We're available 24/7 to help.",
      },
      {
        value: "item-7",
        question: "Do you provide weekend assistance?",
        answer:
          "Yes, our support team is available 7 days a week, including weekends and holidays.",
      },
      {
        value: "item-8",
        question: "Is live chat support available?",
        answer:
          "Yes, live chat support is available during business hours. For after-hours issues, please email us.",
      },
      {
        value: "item-9",
        question: "Where can I find detailed guides?",
        answer:
          "Our comprehensive knowledge base with guides and tutorials is available in the help section.",
      },
    ],
  },
]

export function Faq() {
  return (
    <section
      aria-label="FAQ"
      className="mx-auto flex w-full max-w-4xl flex-col gap-12 text-foreground motion-reduce:**:animate-none motion-reduce:**:transition-none"
    >
      <header className="flex flex-col gap-3">
        <Badge variant="secondary" className="w-fit">
          Help topics
        </Badge>
        <div className="flex flex-col gap-2">
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl md:text-5xl">
            Browse by department
          </h1>
          <p className="text-muted-foreground">
            Account, payments, and support, each with their own set of answers.
          </p>
        </div>
      </header>

      <div className="flex flex-col gap-12">
        {categories.map((category) => (
          <div
            key={category.label}
            className="flex flex-col gap-4 md:flex-row md:gap-8"
          >
            <div className="flex min-w-fit flex-col gap-1">
              <h2 className="text-lg font-semibold">{category.label}</h2>
              <p className="text-sm text-muted-foreground">
                {category.description}
              </p>
            </div>
            <div className="max-w-md flex-1 md:ml-auto">
              <Accordion
                defaultValue={category.items
                  .slice(0, 1)
                  .map((item) => item.value)}
                className="gap-2"
              >
                {category.items.map((item) => (
                  <AccordionItem
                    key={item.value}
                    value={item.value}
                    className="rounded-xl border-0 bg-card shadow-elevated-sm"
                  >
                    <AccordionTrigger className="px-4 py-3.5 text-sm text-muted-foreground hover:no-underline aria-expanded:text-foreground">
                      {item.question}
                    </AccordionTrigger>
                    <AccordionContent className="flex flex-col gap-2 px-4 pb-3 text-pretty text-foreground">
                      <p className="text-sm">{item.answer}</p>
                    </AccordionContent>
                  </AccordionItem>
                ))}
              </Accordion>
            </div>
          </div>
        ))}
      </div>

      <FancyButton size="lg" className="w-fit">
        Talk to sales
      </FancyButton>
    </section>
  )
}
```