Vertical Dial Nav
Scroll-linked section navigation with distance-faded labels. The active section gains weight and scale as it crosses 30% of the viewport. Click a label to scroll to its section. Pure React, with support for nested scroll containers.
Active label
Fade distance2
Label spacing12
npx shadcn@latest add @compronents/vertical-dial-navInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | readonly DialSection[] | — | Section IDs and labels, in scroll order. IDs must match elements inside the scroll root. |
| scrollRoot | RefObject<HTMLElement | null> | — | Optional section scroll container. Omit to observe window scrolling. |
| activeColor | string | rgb(26, 26, 26) | Selected label color. |
| fadeDistance | number | 2 | Number of neighboring labels before opacity reaches 0.2. |
| font | CSSProperties | — | Label font styling. Defaults to 16px Geist with -0.05em letter spacing. |
| dialWidth | number | 180 | Navigation width in pixels. |
| dialRadius | number | 0 | Clipping radius in pixels. |
| itemSpacing | number | 12 | Vertical gap between labels in pixels. |
| alignment | "left" | "center" | "right" | "right" | Label alignment. |
| style | CSSProperties | — | Additional navigation container styling. Give its parent a height. |
| className | string | — | Additional navigation class. |
activeColorcolorSelected label color.
fadeDistancesliderNeighboring label fade range.
itemSpacingsliderVertical label spacing.
None.