Pinned Panels

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/scroll-pinned-panels

Usage

import { ScrollPinnedPanels } from "@/components/scroll-pinned-panels";

export default function Page() {
  return (
    <ScrollPinnedPanels>
      <div>
        <h2>Chapter one</h2>
        <p>The section pins while the story plays.</p>
      </div>
      <div>
        <h2>Chapter two</h2>
        <p>Each panel crossfades in over the last.</p>
      </div>
      <div>
        <h2>Chapter three</h2>
        <p>Scroll on and the pin releases.</p>
      </div>
    </ScrollPinnedPanels>
  );
}

Props

Customisation

Pinned Panels declares no tokens of its own: the section and each panel surface use the semantic background token, and everything inside a panel is your own markup, styled however you like. To retheme the section, restyle your panel content directly or override the semantic tokens it consumes from :root or any ancestor:

:root {
  --background: var(--color-neutral-900);
  --foreground: var(--color-neutral-50);
}

Frequently asked questions

Is Pinned Panels free for commercial use?

Yes. Pinned Panels is MIT licensed, so you can use it in personal and commercial projects without attribution.

Does Pinned Panels trap scrolling or hurt accessibility?

No. The crossfade is scrubbed from native scroll and never intercepts it, so mouse wheel, trackpad, touch and keyboard keys such as arrows, space and PageDown all move through and past the section uninterrupted. The track reserves the full scroll distance up front, so pinning causes no layout shift, and the crossfade animates only transforms and opacity. Every panel stays in the Tab order: moving focus into a panel scrolls the page to the point where that panel is on top, so the focused element and its focus ring are always visible. With reduced motion enabled the panels render as a static stack with nothing listening to scroll.

Why does the section scroll past instead of sticking?

The pin is CSS position: sticky, which needs a clear path to the page's scroller. If any ancestor between the section and the page sets overflow to hidden, auto or scroll, sticky stops working there; use overflow: clip on that ancestor instead, which clips the same way without creating a scroll container.

What happens on a short viewport, such as a phone in landscape?

The section stays stacked and nothing is hidden. The component measures the tallest panel's own content and only pins where one panel is at least that tall, because a pinned panel is exactly one viewport tall and clipped, and scrolling advances the crossfade rather than the panel. That measurement is retaken whenever the section changes width, not just retested: narrowing a panel rewraps your copy into a taller composition, so a width measured on a desktop says nothing about the same panels on a phone. Turn a phone from portrait to landscape, or drag a desktop window narrow, and the section drops out of the pin rather than clipping every panel; widen it again and the pin returns.

How do I change the number of panels or their content?

Pass between two and five direct children to the component; each direct child becomes one panel in DOM order. Panels are plain containers, so headings, text, images and layout inside each one are entirely your own markup and Tailwind classes, and heading levels stay under your control.

Related components

• Horizontal Scroll
• Parallax Layers
• Scroll Image Sequence