Progress Bars, Reading Rails, and Gamification
Sticky Table of Contents Sidebar
A floating sidebar of section links that follows the reader down the page and highlights the current section using IntersectionObserver. Great for long-form articles, docs, product story pages, and any content long enough to need orientation.
Live preview
No extra dependencies. React 18+ and Tailwind CSS v3+ assumed. Save as StickyTocSidebar.tsx.
Or rebuild it with a prompt
Paste the prompt into the tool you already use. Each version is written specifically for that tool, matched to the same design constraints so the output stays consistent.
Build components/StickyTocSidebar.tsx as a client component. Aside hidden sm:block with a sticky top-6 inner div. IntersectionObserver watches all sections with matching ids (rootMargin -40% 0px -55% 0px) and sets active state. Nav renders a flex-col of anchor links (12px medium tracking-tight); active link is font-semibold text-black, inactive is text-[#9a9a9a] hover:text-black. Props: sections (array of {id, label}). Single default export.How to use this Sticky Table of Contents Sidebar as a prompt
- Paste the prompt into Claude Code, Cursor, or Google Stitch to build a Sticky Table of Contents Sidebar for React long-form article pages.
- Best for documentation sites, knowledge base articles, and blog posts with multiple headings that readers need to jump between.
- Ask Codex or Lovable to auto-generate the TOC from H2 tags in your MDX content, or pass a hardcoded sections array.
How to use this Sticky Table of Contents Sidebar as code
- Copy the React + Tailwind file into `components/article/` and pass a sections array of id plus label.
- Uses IntersectionObserver to highlight the visible section. Clicking a heading smooth-scrolls to it.
- Compatible with Next.js App Router, MDX, Contentlayer, Astro content collections, and Docusaurus.
Other React progress and reading components like the Sticky Table of Contents Sidebar
More progress and reading components with matching AI prompts for Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch.
Progress Bars, Reading Rails, and Gamification
Reading Progress Rail (Sidebar with Read Time)
Reading progress rail with percent-complete and estimated read-time labels, for blog posts, documentation, and long-form editorial articles. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Progress Bars, Reading Rails, and Gamification
Scroll Progress Bar (Top of Page)
Scroll progress bar for pages, a thin top-of-page line that fills as the reader scrolls, for long-form articles, blog posts, and documentation pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Progress Bars, Reading Rails, and Gamification
Onboarding Progress Bar (Multi-Step Numbered)
Multi-step onboarding progress bar with numbered circles connected by a filling line, for SaaS signup flows, product setup wizards, and ecommerce checkout funnels. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Related prompts for progress bars, reading rails, and gamification
Frequently asked questions about the Sticky Table of Contents Sidebar
How do I add a Sticky Table of Contents Sidebar to my website?+
Copy the source code from the "Copy code" button above and save it as a .tsx file in your components folder. The Sticky Table of Contents Sidebar is built with React and Tailwind CSS — add those as dependencies if they are not already in your project. Import and render the component wherever you need it. Every prop is optional and typed.
Can I use the Sticky Table of Contents Sidebar with Claude Code, Cursor, or Lovable?+
Yes. Each prompt tab above is tuned specifically for Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch. Paste the prompt into whichever AI coding tool you are using and it will generate a Sticky Table of Contents Sidebar matched to your existing file structure, design tokens, and brand color. Claude Code and Cursor work best when your project is already open — they slot the component directly into your codebase. Lovable and Replit are fastest for a standalone preview.
How do I customise the toc design and colors?+
The Sticky Table of Contents Sidebar uses Tailwind utility classes throughout, so every color, spacing value, and font weight is one class away from changing. Replace any color class with your brand token (for example, swap `bg-black` for `bg-[#your-hex]`). To change the animation timing, update the `duration-` or `delay-` classes, or pass new values into the Framer Motion `transition` prop if the component uses it. For a full brand restyle, paste the component into Claude Code or Cursor and describe your design system.
Is the Sticky Table of Contents Sidebar free to use in commercial projects?+
Yes. Every component in the AI Library, including the Sticky Table of Contents Sidebar, is free to copy, adapt, and ship in commercial projects, client work, SaaS products, open-source repos, and internal tools. No attribution required, no license fee, no royalty.
What sticky frameworks does the Sticky Table of Contents Sidebar support?+
The Sticky Table of Contents Sidebar is a plain React 18 client component written in React + Tailwind. It runs on Next.js (App Router and Pages Router), Vite, Remix, Gatsby, and any other framework that supports React 18 and Tailwind CSS v3. Keep the "use client" directive at the top of the file when you paste it into a Next.js App Router project.
Does the Sticky Table of Contents Sidebar work with TypeScript?+
Yes. The component is written in TypeScript with fully typed props and exported interfaces. Paste it into a TypeScript project and it compiles without modification. If you need a plain JavaScript version, ask Claude Code or Cursor to strip the type annotations.
Can I combine the Sticky Table of Contents Sidebar with other AI Library sections?+
Yes. Every component in the AI Library is standalone with no shared global state, no conflicting resets, and no namespace collisions. Drop the Sticky Table of Contents Sidebar alongside any other section component. They are compatible with shadcn/ui, Radix UI, MUI, and any other component library you are already using.