Introducción
Esta guía explica cómo instalar el paquete y dejarlo listo en cinco minutos. No hace falta experiencia previa.
Instalación
Necesitas Node 20 o superior y un gestor de paquetes. Elige el que ya uses en tu proyecto.
Con npm
npm install lumen
Con pnpm
pnpm add lumen
Uso
Importa el componente y pásale tus datos. Funciona igual en el servidor y en el navegador.
Opciones
Todas las opciones tienen un valor por defecto razonable. Cambia solo las que necesites.
Preguntas
Si algo falla, revisa la versión de Node antes que nada. Después, borra la caché y prueba otra vez.
On-page contents with reading rail
A side contents list whose rail bends with each heading's indent and lights up the sections you are reading as you scroll.
Settings
Code
<div class="uvq12-sr"><div class="sc" tabindex="0" aria-label="Documentation"><section id="uvq12-sr-s0"><h4>Introduction</h4><p>This guide explains how to install the package and get it ready in five minutes. No prior experience needed.</p></section><section id="uvq12-sr-s1"><h4>Installation</h4><p>You need Node 20 or later and a package manager. Pick the one your project already uses.</p></section><section id="uvq12-sr-s2"><h5>With npm</h5><p><code>npm install lumen</code></p></section><section id="uvq12-sr-s3"><h5>With pnpm</h5><p><code>pnpm add lumen</code></p></section><section id="uvq12-sr-s4"><h4>Usage</h4><p>Import the component and pass it your data. It works the same on the server and in the browser.</p></section><section id="uvq12-sr-s5"><h5>Options</h5><p>Every option has a sensible default. Change only the ones you need.</p></section><section id="uvq12-sr-s6"><h4>Questions</h4><p>If something breaks, check your Node version first. Then clear the cache and try again.</p></section></div><nav class="tc" aria-label="On this page"><p>On this page</p><div class="rl"><svg aria-hidden="true"><path class="b"/><path class="h"/></svg><ul><li class="l0"><a href="#uvq12-sr-s0">Introduction</a></li><li class="l0"><a href="#uvq12-sr-s1">Installation</a></li><li class="l1"><a href="#uvq12-sr-s2">With npm</a></li><li class="l1"><a href="#uvq12-sr-s3">With pnpm</a></li><li class="l0"><a href="#uvq12-sr-s4">Usage</a></li><li class="l1"><a href="#uvq12-sr-s5">Options</a></li><li class="l0"><a href="#uvq12-sr-s6">Questions</a></li></ul></div></nav></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Navigation
See all NavigationWhere to use it
A table of contents for documentation pages: the rail on its left bends inward for sub-headings and lights up the stretch that matches the sections currently on screen. As you scroll the article the highlight grows, shrinks and slides, and clicking an entry scrolls smoothly to it. The path is drawn by a short script from the real link positions, so it adapts to any list.
The main color sets the highlight and active links. Add or remove sections and levels in the data, and keep the headings short so each entry fits on one or two lines.