# Faq 11

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

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

## Install

```bash
npx shadcn@latest add https://diarmuradi.com/r/faq-11.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-5xl flex-col gap-12 text-foreground motion-reduce:**:animate-none motion-reduce:**:transition-none"
    >
      <header className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div className="flex flex-col gap-3">
          <Badge variant="secondary" className="w-fit">
            Three columns
          </Badge>
          <div className="flex flex-col gap-2">
            <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl md:text-5xl">
              Account, payments & support
            </h1>
            <p className="text-muted-foreground">
              Pick a column, then open the question that matches what you need.
            </p>
          </div>
        </div>
        <FancyButton size="lg" className="w-fit">
          Email the team
        </FancyButton>
      </header>

      <div className="flex flex-col gap-6 md:flex-row md:gap-12">
        {categories.map((category) => (
          <div key={category.label} className="flex flex-1 flex-col 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>
            <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>
    </section>
  )
}
```