Shadcn FAQ Block Four
Shadcn FAQ Block Four is the navigable FAQ variant. The source is a client component that uses useMemo, useState, and useEffect with an IntersectionObserver to track the active FAQ group while visitors scroll.
The demo groups are General, Shipping, and Payment, with commerce-style questions about shipping, returns, payment methods, currencies, and refunds. Replace them with real product or support content before publishing.
Sticky Navigation
The left column includes group buttons with Lucide icons such as OctagonAlert, Truck, and WalletCards. On wider screens the nav is sticky, so visitors can jump between question groups without losing context.
Accordion Content
Each group renders a shadcn Accordion with single collapsible behavior. The section marks each group with data-faq-group, which is what the observer reads to update the active group.
Implementation Notes
Because this FAQ section uses browser APIs and state, it needs to remain a client component. Keep the observer cleanup intact if you refactor the block, and test active states after adding or removing groups.
Frequently Asked Questions
When is this variant better than a simple FAQ?
Use it when the FAQ section is long enough that category navigation helps. For five or six total questions, a simpler section is easier.
What should be changed first?
Replace demo questions, update icons if your groups change, and make sure every group has a stable lower-case ID.
Related Shadcn UI Blocks
Start from Tailark
Build with Tailark
Production-ready marketing blocks, pages, and illustrations for Shadcn UI.