# Faq 5

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

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

## Install

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

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

## Dependencies

- npm packages: `lucide-react`
- 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/button.json`

## Files

### `faq.tsx`

```tsx
"use client"

import Link from "next/link"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { MinusIcon, PlusIcon } from 'lucide-react'

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

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

const categories: FaqCategory[] = [
  {
    label: "Account",
    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: "Support",
    items: [
      {
        value: "item-4",
        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-5",
        question: "Do you provide weekend assistance?",
        answer:
          "Yes, our support team is available 7 days a week, including weekends and holidays.",
      },
      {
        value: "item-6",
        question: "Is live chat support available?",
        answer:
          "Yes, live chat support is available during business hours. For after-hours issues, please email us.",
      },
    ],
  },
  {
    label: "Payments",
    items: [
      {
        value: "item-7",
        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-8",
        question: "Are refunds handled automatically?",
        answer:
          "Yes, refunds are processed automatically and typically appear in your account within 3-5 business days.",
      },
    ],
  },
]

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

      <div className="flex flex-col gap-4">
        {categories.map((category) => (
          <div key={category.label} className="flex flex-col gap-2">
            <h2 className="ml-1 text-sm font-medium text-muted-foreground">
              {category.label}
            </h2>
            <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="overflow-hidden rounded-xl border-0 bg-muted"
                >
                  <AccordionTrigger className="p-4 text-sm text-muted-foreground hover:text-foreground hover:no-underline aria-expanded:text-foreground *:data-[slot=accordion-trigger-icon]:hidden">
                    <span>{item.question}</span>
                    <span className="ml-auto flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
                      <PlusIcon  aria-hidden="true" className="size-3.5 group-aria-expanded/accordion-trigger:hidden" />
                      <MinusIcon  aria-hidden="true" className="hidden size-3.5 group-aria-expanded/accordion-trigger:inline" />
                    </span>
                  </AccordionTrigger>
                  <AccordionContent className="flex flex-col gap-2 px-4 pb-4 text-pretty text-foreground">
                    <p className="text-sm">{item.answer}</p>
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        ))}
      </div>

      <div className="flex w-full max-w-fit flex-col items-center gap-0.5 rounded-lg bg-muted p-2 text-sm text-muted-foreground md:mx-auto md:flex-row">
        <span>Got more questions? </span>
        <Button
          variant="link"
          className="h-auto p-0"
          nativeButton={false}
          role="link"
          render={<Link href="mailto:user@example.com" role="link" />}
        >
          user@example.com
        </Button>
      </div>
    </section>
  )
}
```