FAQ Accordion
A free accessible FAQ section with a CSS grid-rows accordion animation.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- 1 runtime package
FAQ Accordion is a free FAQ section component for Next.js and React, an accessible react accordion animation built with Tailwind and plain CSS transitions. Each question is a real button wrapped in an h3, wired with aria-expanded and aria-controls to a labelled region, and the answer opens by interpolating the panel wrapper's grid-template-rows from 0fr to 1fr, so nothing jumps and no height is measured in JavaScript.
The chevron rotates in sync with the panel, closed answers leave the accessibility tree and Tab order once the collapse finishes, and a single prop keeps at most one item open at a time. Enter and Space work natively because the trigger is a real button, focus is always visible, and with prefers-reduced-motion enabled every toggle is instant while the content stays fully available.
Frequently asked questions
Everything you need to know before getting started.
Most teams are live within a day. Connect your repository, pick a template and the first deploy runs end to end in under ten minutes; the rest of the day is usually spent wiring up your domain and inviting the team.
Yes. Add the domain in your project settings and point a CNAME record at your deployment. Certificates are issued and renewed automatically, and apex domains are supported through ALIAS or ANAME records. See the custom domain guide for registrar-specific steps.
Nothing breaks. Your project keeps running and we email you before any soft limit is enforced. You can raise limits from the dashboard at any time, and overage pricing is metered per request rather than in bulk tiers.
Every paid plan comes with a 30 day money back guarantee. If the product is not a fit, reply to your receipt email within 30 days of purchase and the full amount is returned, no questions asked.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/faq-accordionUsage
import { FaqAccordion } from "@/components/faq-accordion";
const items = [
{
question: "How long does onboarding take?",
answer: <p>Most teams are live within a day.</p>,
},
{
question: "Do you offer refunds?",
answer: <p>Every paid plan comes with a 30 day money back guarantee.</p>,
},
];
export default function Page() {
return <FaqAccordion single items={items} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { question: string; answer: ReactNode }[] | required | One entry per accordion item. |
| single | boolean | false | One-open-at-a-time mode: opening an item closes the currently open item with the same transition. |
| className | string | undefined | Additional classes merged onto the root. |
Customisation
FAQ Accordion declares no tokens of its own; it consumes the global semantic tokens through Tailwind utilities and reads the shared motion tokens --dur-2 and --ease-out-quart for the open and close transition, with the library defaults as fallbacks. Retheme it through those tokens from :root, or restyle the root through the className prop:
:root {
--dur-2: 250ms;
--border: oklch(from var(--color-neutral-50) l c h / 0.16);
}
<FaqAccordion items={items} className="max-w-2xl" />Frequently asked questions
- Is FAQ Accordion free for commercial use?
- Yes. FAQ Accordion is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is FAQ Accordion accessible for keyboard and screen reader users?
- Yes. Each question is a real button wrapped in an h3, so Enter and Space toggle it natively and focus is always visible. The button exposes aria-expanded and aria-controls, the answer panel is a region labelled by its question, and a closed answer leaves the accessibility tree and Tab order once its collapse finishes. With reduced motion enabled every toggle is instant and open content stays fully available.
- How does the open and close animation work, and can I retune it?
- The answer sits inside a grid wrapper whose grid-template-rows interpolates from 0fr to 1fr, with the inner element set to min-height 0 and overflow hidden, so the browser animates the row track instead of a measured height and layout never jumps. The transition reads the shared --dur-2 duration and --ease-out-quart easing tokens, so overriding those from :root retunes the accordion along with the rest of the library.