# Faq 7

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

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

## Install

```bash
npx shadcn@latest add https://diarmuradi.com/r/faq-7.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/badge.json`, `https://diarmuradi.com/r/styles/base-nova/fancy-button.json`

## Files

### `faq.tsx`

```tsx
"use client"

import { Badge } from "@/components/ui/badge"
import { FancyButton } from "@/components/ui/fancy-button"
import { BookOpenIcon, CreditCardIcon, LockIcon, MailIcon, StarIcon, UserIcon } from 'lucide-react'

type FaqItem = {
  value: string
  question: string
  answer: string
  icon: React.ReactNode
}

const faqs: FaqItem[] = [
  {
    value: "1",
    icon: (
      <UserIcon  aria-hidden="true" className="size-4" />
    ),
    question: "Can I cancel anytime?",
    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: "2",
    icon: (
      <StarIcon  aria-hidden="true" className="size-4" />
    ),
    question: "Do you offer student discounts?",
    answer:
      "Yes. Students get 50% off every plan. Verify with a current enrollment document and the discount applies immediately.",
  },
  {
    value: "3",
    icon: (
      <LockIcon  aria-hidden="true" className="size-4" />
    ),
    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: "4",
    icon: (
      <CreditCardIcon  aria-hidden="true" className="size-4" />
    ),
    question: "Is there a free trial before payment?",
    answer:
      "Yes. Every new workspace includes a 14-day trial with full access. No card is required to start.",
  },
  {
    value: "5",
    icon: (
      <BookOpenIcon  aria-hidden="true" className="size-4" />
    ),
    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.",
  },
  {
    value: "6",
    icon: (
      <MailIcon  aria-hidden="true" className="size-4" />
    ),
    question: "How do I reach support?",
    answer:
      "Yes. Support is available around the clock by live chat and email, with typical replies in under two hours.",
  },
]

export function Faq() {
  return (
    <section
      aria-label="FAQ"
      className="mx-auto flex w-full max-w-4xl 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">
          Always visible
        </Badge>
        <div className="flex flex-col gap-2">
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl md:text-5xl">
            Straight answers
          </h1>
          <p className="max-w-xl text-muted-foreground">
            No accordion. Icon, question, and answer stay on the page.
          </p>
        </div>
      </header>

      <div className="grid grid-cols-1 gap-x-8 gap-y-6 md:grid-cols-2">
        {faqs.map((faq) => (
          <div key={faq.value} className="flex gap-4">
            <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted">
              {faq.icon}
            </div>
            <div className="flex flex-col gap-1.5">
              <h2 className="text-sm font-medium text-foreground">
                {faq.question}
              </h2>
              <p className="text-sm text-muted-foreground">{faq.answer}</p>
            </div>
          </div>
        ))}
      </div>
      <FancyButton size="lg" className="w-fit">
        See all guides
      </FancyButton>
    </section>
  )
}
```