Shadcn.io is not affiliated with official shadcn/ui
FAQ with Icon
A React FAQ collapsible with HelpCircle icon and hover border for visual question categorization using Lucide React and shadcn/ui
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.
FAQ with Icon preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.