Shadcn FAQ Block Four

A client-side FAQ section with General, Shipping, and Payment groups plus sticky navigation that follows the visible group.

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

Preview Shadcn FAQ Block Four