# Faq 19

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

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

## Install

```bash
npx shadcn@latest add https://diarmuradi.com/r/faq-19.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`, `https://diarmuradi.com/r/styles/base-nova/icons.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"
import { Icons } from "@/components/ui/icons"

type FaqItem = {
  value: string
  question: string
  answer: string
  media?: "muted" | "primary"
}

const faqs: FaqItem[] = [
  {
    value: "01",
    question: "Can I cancel anytime?",
    media: "muted" as const,
    answer:
      "Yes. You can cancel from billing at any time. Access stays active until the end of the cycle, and you will not be charged again.",
  },
  {
    value: "02",
    question: "Do you offer student discounts?",
    media: "primary" as const,
    answer:
      "Yes. Students get 50% off every plan. Verify with a current enrollment document and the discount applies immediately.",
  },
  {
    value: "03",
    question: "Is my data kept secure?",
    answer:
      "Yes. Data is encrypted in transit and at rest. We follow SOC 2 and GDPR, with regular third-party audits.",
  },
  {
    value: "04",
    question: "Can I upgrade or downgrade my plan?",
    answer:
      "Yes. Switch plans anytime. Changes take effect immediately, and billing is prorated automatically.",
  },
  {
    value: "05",
    question: "Do you provide onboarding support?",
    answer:
      "Yes. Every customer gets guided setup, interactive demos, and a shared checklist so the first publish is straightforward.",
  },
]

export function Faq() {
  return (
    <section
      aria-label="FAQ"
      className="mx-auto flex w-full max-w-xl flex-col gap-8 text-foreground motion-reduce:**:animate-none motion-reduce:**:transition-none"
    >
      <header className="flex flex-col gap-3">
        <Badge variant="secondary" className="w-fit">
          Visual answers
        </Badge>
        <div className="flex flex-col gap-2">
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl md:text-5xl">
            Plans, security, and onboarding
          </h1>
          <p className="text-muted-foreground">
            A few questions include a preview so you can see what the product
            looks like.
          </p>
        </div>
      </header>

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

      <Accordion defaultValue={["01"]} className="gap-2">
        {faqs.map((item) => (
          <AccordionItem key={item.value} value={item.value}>
            <AccordionTrigger className="text-muted-foreground aria-expanded:text-foreground">
              {item.question}
            </AccordionTrigger>
            <AccordionContent className="flex flex-col gap-3 pb-3 text-pretty text-foreground">
              <p className="text-sm">{item.answer}</p>
              {item.media === "muted" ? (
                <div className="flex aspect-24/9 w-full items-center justify-center rounded-xl bg-muted">
                  <Icons.Logo
                    aria-hidden="true"
                    className="h-8 w-auto [&_path]:fill-foreground"
                  />
                </div>
              ) : null}
              {item.media === "primary" ? (
                <div className="flex aspect-24/9 w-full items-center justify-center rounded-xl bg-primary">
                  <Icons.Logo aria-hidden="true" className="h-8 w-auto" />
                </div>
              ) : null}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>

      <FancyButton size="lg" className="w-fit">
        Chat with us
      </FancyButton>
    </section>
  )
}
```