# Faq 1

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

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

## Install

```bash
npx shadcn@latest add https://diarmuradi.com/r/faq-1.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`, `https://diarmuradi.com/r/styles/base-nova/fancy-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 { FancyButton } from "@/components/ui/fancy-button"
import { MinusIcon, PlusIcon } from 'lucide-react'

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

const faqs: FaqItem[] = [
  {
    value: "item-1",
    question: "What countries do you support?",
    answer:
      "We currently support operations in 45+ countries across North America, Europe, Asia, and Australia. We're continuously expanding our reach. Check our website for the most up-to-date list of supported countries and regions.",
    date: "10 Jan, 2025",
  },
  {
    value: "item-2",
    question: "How secure is my financial data?",
    answer:
      "We use bank-level encryption, two-factor authentication, and comply with major global standards such as PSD2, GDPR, and SOC 2.\n\nYour financial data is encrypted both at rest and in transit, and our systems are monitored 24/7 for unusual activity. We also undergo regular third-party audits to ensure the highest level of security and compliance.",
    date: "24 May, 2025",
  },
  {
    value: "item-3",
    question: "Is there a free trial available?",
    answer:
      "Yes! We offer a 14-day free trial with full access to all features. No credit card is required to start. After the trial period, you can choose a plan that best fits your needs.",
    date: "15 Dec, 2024",
  },
  {
    value: "item-4",
    question: "How long do transfers usually take?",
    answer:
      "Most domestic transfers are completed within 1-2 business days. International transfers typically take 3-5 business days depending on the destination country and banking system. Expedited transfers are available for an additional fee.",
    date: "8 Jan, 2025",
  },
  {
    value: "item-5",
    question: "Can I upgrade or downgrade my plan anytime?",
    answer: "Absolutely. We'll prorate any adjustments to your account.",
    date: "20 Nov, 2024",
  },
  {
    value: "item-6",
    question: "Do you offer customer support in other languages?",
    answer:
      "We provide support in English, Spanish, French, and German during business hours.",
  },
]

export function Faq() {
  return (
    <section
      aria-label="FAQ"
      className="mx-auto flex w-full max-w-2xl flex-col gap-8 text-foreground motion-reduce:**:animate-none motion-reduce:**:transition-none"
    >
      <header className="flex flex-col items-center gap-3 text-center">
        <Badge variant="secondary" className="w-fit">
          Help center
        </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">
            Got questions? We have answers
          </h1>
          <p className="max-w-md text-muted-foreground">
            Coverage, transfer times, and how we keep financial data safe.
          </p>
        </div>
      </header>

      <h2 className="sr-only">Questions</h2>

      <Accordion className="gap-2">
        {faqs.map((item) => (
          <AccordionItem
            value={item.value}
            key={item.value}
            className="overflow-hidden rounded-xl border-0 bg-muted"
          >
            <AccordionTrigger className="p-4 text-muted-foreground hover:text-foreground hover:no-underline aria-expanded:text-foreground *:data-[slot=accordion-trigger-icon]:hidden">
              <span>{item.question}</span>
              <PlusIcon  aria-hidden="true" className="ml-auto size-4 shrink-0 text-muted-foreground group-aria-expanded/accordion-trigger:hidden" />
              <MinusIcon  aria-hidden="true" className="ml-auto hidden size-4 shrink-0 text-muted-foreground group-aria-expanded/accordion-trigger:inline" />
            </AccordionTrigger>
            <AccordionContent className="flex flex-col gap-2 px-4 pb-4 text-pretty text-foreground">
              <p className="text-sm whitespace-pre-line">{item.answer}</p>
              {item.date && (
                <p className="text-xs text-muted-foreground">{item.date}</p>
              )}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>

      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex flex-wrap items-center gap-1 text-sm text-muted-foreground">
          <span>Still have questions? Email us at</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>
        <FancyButton size="lg">Message support</FancyButton>
      </div>
    </section>
  )
}
```