Shadcn.io is not affiliated with official shadcn/ui
FAQ with Table of Contents Block
An FAQ block with table of contents for React and Next.js with jump links and smooth scrolling built with shadcn/ui and Tailwind CSS
Build an FAQ with navigation using React, Next.js, TypeScript, shadcn/ui, Tailwind CSS, and Framer Motion. Features a table of contents with clickable jump links, smooth scrolling to questions, active section highlighting, and staggered animations. Uses Button, ScrollArea components, motion animations, and Lucide icons. Perfect for comprehensive documentation, long-form FAQs, and knowledge base articles where users need quick navigation to find specific information without scrolling through all content.
FAQ with Table of Contents Block preview
Installation
Related Components
FAQ with Collapsible Sidebar
FAQ with category sidebar
Bookmarkable FAQ
FAQ with star bookmarking
FAQ with Share
FAQ with share buttons per item
Preview FAQ Block
With Preview FAQ block
Emoji FAQ Block
With Emoji FAQ block
Changelog FAQ Block
With Changelog FAQ block
FAQ
Was this page helpful?
Sign in to leave feedback.
Testimonial FAQ Block
A FAQ block with customer testimonial for React and Next.js with social proof integration built with shadcn/ui and Tailwind CSS
Tooltip FAQ Block
A glossary-enhanced FAQ block for React and Next.js with inline term definitions and hover tooltips built with shadcn/ui and Tailwind CSS