Dot Leader Contents
A table of contents in book-index style — dot leaders extend dot by dot from left to right to meet the page number, and a preview card floats out from the end of the row on hover.
npx shadcn@latest add https://webberui.com/r/dot-leader-contents.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<DotLeaderContents />
Installation
npx shadcn@latest add https://webberui.com/r/dot-leader-contents.jsonInstalling also writes the --wb-duration-fast and --wb-ease-out CSS variables into your global stylesheet.
Usage
import { DotLeaderContents } from "@/components/ui/dot-leader-contents";
<DotLeaderContents
items={[
{ id: "origin", title: "Chapter One: Origins", label: "01" },
{ id: "voyage", title: "Chapter Two: The Voyage", label: "02" },
]}
onSelect={(id) => console.log(id)}
/>Props
DotLeaderContents
| Prop | Type | Default | Description |
|---|---|---|---|
items | DotLeaderItem[] | — | The list of contents entries |
onSelect | (id: string) => void | — | Fired when a row is clicked; when omitted, it falls back to scrolling to the page anchor matching id |
className | string | — | Extra classes for the outer <nav> |
DotLeaderItem
| Field | Type | Description |
|---|---|---|
id | string | Unique identifier; passed to onSelect on click, or used as the page anchor id when no onSelect is provided |
title | string | Chapter title (left side of the row) |
label | string | Number or page-number string (right side of the row) |
preview | ReactNode | Optional: preview content that floats out from the end of the row on hover (a thumbnail, a color swatch, and so on) |
How it works
- Reveal:
whileInViewplus stagger brings the rows in one by one; the dot leader extends from left to right viascaleXwithorigin-left, and the number fades in once the leader has connected - Dot leader: a repeating
radial-gradientdot pattern inside anoverflow-hiddencontainer, colored withcurrentColor— no extra DOM nodes needed - Hover: the leader darkens, the title shifts 4px right, and the number scales up; rows with a
previewfloat a preview card out from the end of the row (keyboard focus triggers it too) - When no
onSelectis provided, clicking smooth-scrolls to the page anchor matchingid - When the user has "reduce motion" enabled at the system level, the complete contents are shown directly, scrolling becomes an instant jump, and hover keeps only the color change
Interview Spread
A magazine interview layout — bold questions in a narrow left column alternating with serif answers in a wide right column, anchored by oversized quotation marks, with a speaker marker sliding along a sidebar rail and turns emerging in sequence as you scroll.
Running Head Folio
A book running-head system — a sticky thin bar showing the current chapter title on the left and a page number derived from the scroll position on the right, with the chapter title flipping like a turning page and the folio incrementing in step at chapter boundaries.