Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Collapsible - FAQ Item
A React FAQ collapsible with question header and Plus icon for expandable answer sections using shadcn/ui and Radix UI
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
FAQs need clarity—question, then answer. This React FAQ collapsible presents question as h3 heading with Plus icon creating minimal, scannable Q&A format. Built with shadcn/ui using border-b pb-4 for subtle separation between items and items-start for proper alignment when questions wrap. The Plus icon (not chevron) signals additive information reveal. Perfect for help centers, documentation, support pages, product info, or any interface where users seek answers to common questions.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
FAQ with Icon
HelpCircle icon with border hover
FAQ Card Style
Card-based FAQ layout
Numbered FAQ
Numbered question indicators
FAQ with Badge
Badge labels on questions
Accordion
Single-open FAQ sections
Card Collapsible
Card-styled collapsible
Questions you might have
React Subtle Card Collapsible
A React collapsible with dashed border and muted background for subtle code or secondary content reveals using shadcn/ui styling
React Collapsible - FAQ with Icon
A React FAQ collapsible with HelpCircle icon and hover border for visual question categorization using Lucide React and shadcn/ui