Dev Design LibraryOpen the library

React Table Of Contents Components

Dev Design Library indexes 18 React table of contents components from 11 open-source UI libraries, with the most coming from Rare UI, ReUI, Nexvyn UI, SpaceUI and Sona UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React. Table of contents components belong to the Navigation group.

TocArk UI · ReactA navigation component that tracks and highlights the active section as users scroll through document content.
Basic scrollspyReUI · ReactBasic scrollspy
TocLobe UI · ReactThe Toc component is used to display a table of contents with clickable anchor links to different sections of a page…
Hook SidebarRare UI · ReactA vertical navigation list with a dashed rail that marks the active item.
Web Table Of ContentsPanel UI · React NativeAn on-this-page table of contents that tracks the section in view.
Scroll IndicatorNexvyn UI · ReactA vertical scroll progress indicator with tick marks, section labels, and a floating position readout.
Section RailSona UI · ReactA compact navigation rail that tracks the reader's position through a long page, revealing labels and editorial…
Scroll SpineUI Lab · ReactMaps the article as a spine of bands, each as long as its section, filling in as you read.
Reading trailCojeev UI · ReactKeep your place with a connected spine, an expandable bookmark or a descriptive chapter overview—all following actual…
ScrollspySpaceUI · ReactTracks the user’s scroll position on the page and automatically highlights the corresponding link in the table of…
Chapter ScrubberFibo · ReactA rail of marks that swell under the pointer like the Dock, previewing the chapter at the crest.
Basic scroll areaReUI · ReactBasic scroll area
Proximity SidebarRare UI · ReactA dash-style scroll sidebar whose items expand as the pointer approaches.
Table of ContentsNexvyn UI · ReactA fixed bottom-left floating block that tracks scroll position, shows the active section, and expands into a navigable…
Section ScrollspySpaceUI · ReactFloating section scrollbar that tracks the active heading as you scroll.
ScrollspyReUI · ReactDynamically highlights navigation to indicate current visible section in viewport during page scroll
Scroll ProgressRare UI · ReactA scroll progress pill that tracks reading position and expands into a squircle menu of sections you can jump to.
Rail TOCRare UI · ReactA table of contents with a paper plane that flies to the section you're reading.

Libraries with React table of contents components

Related categories