A long-form FAQ with a sticky left column: a rolling 01 / 04 counter and a topic index with a glowing progress rail that follow the group you are reading, a support card, and grouped answers that reveal as they enter view.
npx shadcn@latest add https://hyperblur.dev/r/faq-scroll-index.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/faq-scroll-index.tsx.
import { FaqScrollIndex } from "@/components/hyperblur/faq-scroll-index"
<FaqScrollIndex stickyTop={80} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "FAQ" | Mono label above the title. |
| title | string | "Everything you wanted to ask." | Heading. |
| subtitle | string | Paragraph under the heading. | |
| groups | { title: string; items: { question: string; answer: string }[] }[] | 4 groups | Topics with their questions, all shown open. |
| contact | { label: string; href: string; note?: string } | { label: "Chat with the team", href: "#" } | Support card in the sticky column. |
| stickyTop | number | 24 | Sticky offset in pixels, for pages with a fixed header. |
| onGroupChange | (index: number) => void | Called when the group in view changes. | |
| accent | string | "#a78bfa" | Rail, counter and number color. |
| className | string | "" | Extra classes for the root element. |
| style | CSSProperties | Inline styles merged after the accent variables. |