||

Preview Rail

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Pair a compact navigation rail with animated contextual previews.

preview-rail-demo

Overview

Preview Rail lets people inspect linked destinations before choosing one. Hover and focus show a preview, while click or keyboard activation follows the link.

Installation
npx honestui@latest add preview-rail

Usage

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

<PreviewRail items={items} renderPreview={(item) => <ProjectPreview project={item} />} />

Accessibility

Every rail item is a real link and previews respond to keyboard focus as well as hover. Keep preview content supplemental; the label and destination must remain understandable without it.

API Reference
PropTypeDefaultDescription
items*PreviewRailItem[]–Links with id, label, href, and optional description and target metadata.
orientationvertical|horizontal"vertical"Rail direction.
activeIdstring–Controlled selected item.
defaultActiveIdstring–Initial selected item.
onActiveChange(id: string) => void–Runs when selection changes.
renderPreview(item) => ReactNode–Custom preview renderer.