Reading trail

Navigation

Tracks actual reading progress and links to named sections with a quiet organic marker.

React · copy into your project · light and dark themes

Try it

01 / FIELD NOTES

Notice what matters

A useful note starts with something specific: a question, an observation, a small detail you want to remember.

Keep enough context for your future self. Where were you? What changed? What deserves another look?

02 / FIELD NOTES

Make a connection

Ideas become more useful when they can find one another. Connect this thought to a person, a project, or a previous decision.

A short link can carry more context than another long explanation. Let the surrounding words explain where it leads.

03 / FIELD NOTES

Leave a way back

Finish with one next step. A clear place to return helps turn a passing thought into work you can continue.

Scroll back through the note, or use the reading trail to move directly to a section. Its marker follows the part you are reading.

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/reading-trail.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Using reading trail

Pass items with existing document IDs and readable labels. Native anchors remain available before JavaScript.
Use scrollRoot for a contained scrolling panel. The default tracks the document; offset sets the current-section activation line.
Duplicate IDs are consolidated. Missing sections do not claim measured progress.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

ReadingTrailProps

Prop	Type	Required
`items` IDs of sections in this document. Labels and links render on the server.	`readonly ReadingTrailItem[]`	Yes
`label`	`string`	No
`scrollRoot` Omit to track the document; pass a mounted scroll container for a panel.	`HTMLElement \| null`	No
`offset` Activation line below the scroll viewport's top, in pixels.	`number`	No

Accessibility

Links preserve modifier clicks and normal URLs. A selected destination receives focus.
Current section is exposed through aria-current. Optional smooth scrolling respects shared quiet settings.

States and appearance

restscrollingfocusedreduced-motion

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.