Feedback
FAQ Accordion
An accessible FAQ accordion section with expandable questions and smooth animations.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultybeginner
English Prompt
Create an FAQ accordion section with 6 questions and answers. Use shadcn/ui Accordion component and Tailwind CSS. Each item has a question header and expandable answer with smooth height animation. Include proper ARIA attributes for accessibility. Allow only one item open at a time. Make it responsive and add a search/filter input at the top to filter questions.
Chinese Prompt
创建一个包含 6 个问答的 FAQ 折叠区域。使用 shadcn/ui Accordion 组件和 Tailwind CSS。每个项目包含问题标题和可展开答案，并带有平滑高度动画。包含正确的 ARIA 属性以支持无障碍。一次只允许一个项目展开。使其响应式，并在顶部添加搜索/筛选输入以过滤问题。
## Overview
An FAQ section that keeps content compact and scannable. Users can expand only the questions they care about.
## Features
- 6 expandable FAQ items
- Smooth open/close animation
- Single-item expansion mode
- Search/filter input
- Accessible ARIA markup
- Responsive layout
## Usage
Copy the prompt into v0 or Cursor. Replace the Q&A content with your actual frequently asked questions.
## Customization
Modify the prompt to:
- Allow multiple items open at once
- Add categories/grouping
- Include icons or illustrations
- Add "Was this helpful?" feedback