Sticky Scroll

ProNew

A list of steps that scroll past while one pinned visual crossfades to match the active step.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/sticky-scroll

Prop	Type	Default	Description
`items`	`StickyScrollItem[]`	-	Steps in reading order: `{ id, title, description, visual }`.
`visualSide`	`"left" \| "right"`	`"right"`	Side of the pinned visual from the `lg` breakpoint up.
`stickyOffset`	`number`	`96`	Distance from the top where the visual pins, in pixels.
`onActiveChange`	`(id: string) => void`	-	Called when the active step changes.
`container`	`RefObject<HTMLElement \| null>`	-	Scrollable element that contains the steps, when the page itself does not scroll.
`stepMinHeight`	`string`	`"70svh"`	Minimum height of each step from `lg` up.

Also accepts all <div> props except children.

The active step is the one crossing the middle of the viewport (or container). It gets aria-current="step".
Below the lg breakpoint each step shows its own visual inline and nothing is pinned. The pinned panel is aria-hidden because it repeats the inline visuals.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/sticky-scroll

Prop	Type	Default	Description
`items`	`StickyScrollItem[]`	-	Steps in reading order: `{ id, title, description, visual }`.
`visualSide`	`"left" \| "right"`	`"right"`	Side of the pinned visual from the `lg` breakpoint up.
`stickyOffset`	`number`	`96`	Distance from the top where the visual pins, in pixels.
`onActiveChange`	`(id: string) => void`	-	Called when the active step changes.
`container`	`RefObject<HTMLElement \| null>`	-	Scrollable element that contains the steps, when the page itself does not scroll.
`stepMinHeight`	`string`	`"70svh"`	Minimum height of each step from `lg` up.

Also accepts all <div> props except children.

The active step is the one crossing the middle of the viewport (or container). It gets aria-current="step".
Below the lg breakpoint each step shows its own visual inline and nothing is pinned. The pinned panel is aria-hidden because it repeats the inline visuals.