Preview rail

Free

A rail of ticks that previews each section on hover and jumps to it.

Installs components/ui/preview-rail.tsxDepends on none beyond ReactMotion shared motion tokens

pnpm dlx shadcn@latest add https://caliperui.site/r/preview-rail.json

When to use #

Use it for

Long pages and documents with named sections.
Showing where you are and what comes next.

Skip it when

Short pages with no sections.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/preview-rail.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { PreviewRail } from "@/components/ui/preview-rail"

export function SectionRail() {
  return (
    <div className="flex justify-center">
      <PreviewRail
        items={[
          { id: "intro", label: "Introduction", preview: <p className="text-sm">What this guide covers.</p> },
          { id: "install", label: "Installation", preview: <p className="text-sm">Add the package.</p> },
          { id: "usage", label: "Usage", preview: <p className="text-sm">Use it in your app.</p> },
        ]}
      />
    </div>
  );
}

API reference #

PreviewRail

component

PropTypeDefault

labelstring"Sections"

items *readonly PreviewRailItem[]—

onActiveChange((id: string | null) => void)—

classNamestring—

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.