## Product Q&A (S—316)

Customer questions on a product: search existing answers first, vote answers helpful, and ask a new question inline.

- URL: https://sundaeui.dev/components/product-qa
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/product-qa.json`
- Tags: answers, community, reviews, product, questions, q-and-a

Typing in the box filters existing questions; if nothing matches, the same box becomes Ask. Answers show who answered (seller or owner) and a helpful count.
New questions appear at the top marked as awaiting an answer.

### Usage

```tsx
import { ProductQa } from '@/components/sundae/product-qa'

<ProductQa />
```

### Props

- `items` (`{ id: string; q: string; a?: string; by?: string; helpful: number }[]`, required): Questions.
- `onAsk` (`(q: string) => void`): Called on ask.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Product pages, marketplace listings.

### When not to use

- Support tickets: use a help desk.

### Accessibility

- Helpful is a toggle button with its count.
- The filter result count is announced.
- Reduced motion removes the movement and keeps every state change.