# Faq component 17

> Two-column FAQ layout with left content section featuring badge and description, paired with right-side static FAQ cards and "Check All Questions" link button

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

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/faq-component-17
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/faq-component-17-light-8cf4a888f4f69165.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/faq-component-17.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/faq-component-17.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: `motion`
- Registry items: `badge`, `button`, `card`

## Files

### `src/registry/new-york/blocks/marketing-ui/faq-component/faq-component-17/page.tsx`

```tsx
import FAQ from '@/registry/new-york/components/blocks/faq-component-17/faq-component-17'

const faqItems = [
  {
    question: 'What does your company do?',
    answer:
      "Our company specializes in delivering high-quality solutions that are tailored to meet the evolving needs of businesses and individuals. Whether it's a digital product, a creative service, or a custom solution."
  },
  {
    question: 'What services do you offer?',
    answer:
      'We offer a wide range of services including web development, graphic design, digital marketing, and custom software solutions. Our team works closely with clients to create personalized strategies that help them achieve their goals.'
  }
]

const FAQPage = () => {
  return <FAQ faqItems={faqItems} />
}

export default FAQPage
```

### `src/registry/new-york/components/blocks/faq-component-17/faq-component-17.tsx`

```tsx
'use client'

import { motion } from 'motion/react'

import { Badge } from '@/registry/new-york/ui/badge'
import { Button } from '@/registry/new-york/ui/button'
import { Card, CardContent } from '@/registry/new-york/ui/card'

export type FAQItem = {
  question: string
  answer: string
}

type FAQComponentProps = {
  faqItems: FAQItem[]
}

const FAQ = ({ faqItems }: FAQComponentProps) => {
  return (
    <section className='bg-muted py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
        <div className='grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16'>
          {/* Left Column - Content */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7 }}
          >
            <div className='space-y-4'>
              <Badge variant='outline' className='text-sm font-normal'>
                FAQS
              </Badge>
              <h2 className='text-2xl font-semibold md:text-3xl lg:text-4xl'>Discover the Most common Questions</h2>
              <p className='text-muted-foreground text-xl leading-relaxed'>
                We&apos;ve gathered the questions we hear most often and answered them to help you make informed
                decisions.
              </p>
            </div>
          </motion.div>

          {/* Right Column - FAQ Cards */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7, delay: 0.3 }}
            className='flex justify-end'
          >
            <div className='space-y-7 lg:w-[80%]'>
              {faqItems.map((item, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: -30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6, delay: 0.6 + index * 0.15 }}
                >
                  <Card className='shadow-none hover:shadow-lg'>
                    <CardContent className='space-y-2'>
                      <h3 className='text-xl font-medium'>{item.question}</h3>
                      <p className='text-muted-foreground leading-relaxed'>{item.answer}</p>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}

              {/* Check All Questions Link */}
              <motion.div
                initial={{ opacity: 0, y: -30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.9 + faqItems.length * 0.15 }}
              >
                <Button variant='link' className='h-auto p-0 text-base underline' asChild>
                  <a href='#'>Check All Common Questions</a>
                </Button>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  )
}

export default FAQ
```