Sticky Scroll

tsx

import { StickyScroll } from "@/components/myndui/sticky-scroll";export function Features() {return (  <StickyScroll    items={[      { title: "Collaborate", description: "Work together.", content: <Panel /> },      { title: "Ship", description: "Deploy fast.", content: <Panel /> },    ]}  />);}

Documentation

Learn Playground

Text scrolls in the left column while a pinned panel on the right swaps to match the item in view — the premium way to walk through features one beat at a time. Scroll the preview.

Installation

pnpm dlx shadcn@latest add "https://myndui.design/r/sticky-scroll.json"

StickyScroll tracks the section's scroll progress and derives the active index from it, dimming the inactive titles and cross-fading the pinned panel to the active item's content. Under reduced motion the swaps are instant, opacity only.

Usage

tsx

import { StickyScroll } from "@/components/myndui/sticky-scroll";

tsx

<StickyScroll
  items={[
    { title: "Collaborate", description: "Real-time cursors.", content: <Preview /> },
    { title: "Ship", description: "Deploy on click.", content: <Preview /> },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`StickyScrollItem[]`	—	The steps, in scroll order.

Each item is { title: string; description: React.ReactNode; content: React.ReactNode }. StickyScroll also forwards every standard <div> attribute to the root.