FAQ Accordion
An FAQ with live search and highlighting, true auto-height animation, a morphing +/− and 'Was this helpful?'.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Answers open with the CSS grid-template-rows 0fr → 1fr trick, so the height animates to its natural size without measuring. Search filters and highlights matches, and opens the answers when only one or two remain.
Installation
$ npx shadcn@latest add https://guetix.com/r/faq-accordion.json
Uses the shadcn CLI. It creates components/guetix/faq-accordion.tsx and installs nothing else.
Usage
example.tsx
import { FaqAccordion } from "@/components/guetix/faq-accordion";
export default function Example() {
return <FaqAccordion />;
}
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01grid-rows 0fr → 1fr gives real auto-height transitions without JavaScript measurement.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { q; a }[] | — | Questions. |
| multiple | boolean | false | Allow several open. |
| title | string | — | Heading. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Disclosure buttons with aria-expanded/controls; labelled regions; result count announced.