onthic logo
All components

navigation

Dynamic Island TOC

A floating table of contents that collapses to a pill and expands on hover, tracking the section currently in view.

Introduction1 / 4
live on this page — scroll to see it
scrollnavigationframer-motion

Install with the shadcn CLI

npx shadcn@latest add https://onthic.com/r/dynamic-island-toc

Dependencies

npm i framer-motion

Also needs these files

  • @/context/SectionThemeContextsrc/context/SectionThemeContext.tsx
  • @/lib/click-ticksrc/lib/click-tick.ts
  • @/lib/scroll-tosrc/lib/scroll-to.ts

Included automatically by the CLI command and the prompt.

Usage

// Headings matching the selector become the TOC.
<DynamicIslandTOC selector="[data-toc]" />