Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Questions need context—icons help. This React FAQ uses HelpCircle icon from Lucide React positioned at question start with text-muted-foreground for subtle presence. Built with shadcn/ui featuring group hover:border-primary/50 creating interactive border feedback and ml-8 content indent aligning answers with question text. The rounded border card format distinguishes questions more than plain borders. Perfect for help sections, tooltips, onboarding guides, or anywhere question icons reinforce Q&A format.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
FAQ Item
Basic FAQ with Plus icon
FAQ Card Style
Solid card FAQ format
Numbered FAQ
Numbered question indicators
Card with Icon Header
Similar icon pattern
FAQ with Badge
Badge on questions
Accordion
Accordion FAQ layout
Questions you might have
React Collapsible - FAQ Item
A React FAQ collapsible with question header and Plus icon for expandable answer sections using shadcn/ui and Radix UI
React Collapsible - FAQ Card Style
A React FAQ in card format with shadow, hover state, and ChevronDown rotation for polished question-answer sections using shadcn/ui