Section Rail
A vertical rail of ticks at the left edge of the page, one per section. The tick for the section being read lights up; pointing at a tick names its section and clicking jumps there. Built on Preview Rail, which is exported too, for rails with richer previews.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| sections | { id: string; label: string }[] | — | One tick per section, by the id of its element on the page. |
| position | "fixed" | "absolute" | "fixed" | Fixed to the screen's left edge, shown only where there is room beside a 1280px column; or placed in a positioned container. |
| className | string | — | Classes for the root element. |