# FAQ accordion (motion)

> The FAQ accordion, with rows appearing as you scroll to them. The open and close animation works without JavaScript.

Facade UI item `faq-accordion-motion` (block, motion).
Docs page: https://facadeui.dev/components/faq-accordion-motion · Registry JSON: https://facadeui.dev/r/faq-accordion-motion.json

## Install

```bash
npx shadcn@latest add @facade/faq-accordion-motion
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/faq-accordion-motion.json`. The CLI also installs what it needs: @facade/faq-accordion, @facade/motion-primitives.

Files: `components/sections/faq-accordion-motion.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/faq-accordion-motion-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
"use client"

/**
 * The `faq-accordion` demo, with the motion variant swapped in.
 *
 * Identical props: the motion variant only changes which slot components
 * the static section renders through.
 *
 * `"use client"` is required here, not incidental: the motion variant is a
 * client component, and icon components cannot cross a server-to-client
 * boundary as props. See the note on `IconComponent`.
 */

import { FaqAccordionMotion } from "@/components/sections/faq-accordion-motion"

import { FAQS } from "./content"

export function Demo() {
  return (
    <FaqAccordionMotion
      eyebrow="FAQ"
      title="Questions, answered"
      items={FAQS}
      defaultOpen={["faq-is-facade-ui-free"]}
      align="center"
      schemaOrg
    />
  )
}
```