Docs·Preview Rail

Preview Rail

A responsive rail navigator with spring-scaled markers and blur-fade preview swaps.

Installation

$pnpm dlx shadcn@latest add @spiderui/preview-rail

Usage

API Reference

PropTypeDefault
itemsRail entries with id, label, optional description, and optional link settings.
PreviewRailItem[]—
orientationPlaces the marker rail beside or below the preview.
"vertical" | "horizontal""vertical"
activeIdControlled active item id.
string—
defaultActiveIdInitial active item id for uncontrolled usage.
string—
onActiveChangeCalled when an item is selected.
(id: string) => void—
renderPreviewRenders custom content inside the animated preview slot.
(item: PreviewRailItem) => ReactNode—
childrenOptional content placed beside the vertical rail.
ReactNode—
railClassNameAdditional classes for the marker rail.
string—
previewClassNameAdditional classes for the animated preview area.
string—
classNameAdditional classes for the component root.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

Guides

Learn the small implementation details that make motion feel natural.
import { PreviewRail } from "@/components/ui/preview-rail"
const items = [
  {
    id: "docs",
    label: "Documentation",
    description: "Read installation, usage, and API reference notes.",
  },
  {
    id: "components",
    label: "Components",
    description: "Browse polished interface primitives.",
  },
]

export function Demo() {
  return <PreviewRail items={items} orientation="horizontal" />
}