Horizontal Scroll

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-horizontal

Usage

import { ScrollHorizontal } from "@/components/scroll-horizontal";

export default function Page() {
  return (
    <ScrollHorizontal>
      <div>
        <h2>Scene one</h2>
        <p>The section pins and scroll turns sideways.</p>
      </div>
      <div>
        <h2>Scene two</h2>
        <p>Each panel glides across, tied to the scrub.</p>
      </div>
      <div>
        <h2>Scene three</h2>
        <p>Scroll on and the pin releases.</p>
      </div>
    </ScrollHorizontal>
  );
}

Props

Customisation

Horizontal Scroll 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 Horizontal Scroll free for commercial use?

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

Does Horizontal Scroll trap scrolling or hurt accessibility?

No. The sideways travel is scrubbed from native vertical 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, with no snap points. The track reserves the full scroll distance up front, so pinning causes no layout shift, and the scrub animates a single transform on the row of panels. Every panel stays visible and Tab reachable in both modes, focusing content in an offscreen panel scrolls the page to that panel so its focus ring is in view, and with reduced motion enabled the panels render as a static vertical 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. The section also stays stacked where a panel's own content is taller than the viewport, because pinned content below a panel's fold could never be scrolled to.

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

Pass between two and six direct children to the component; each direct child becomes one panel in DOM order, and the scroll distance scales with the panel count automatically. 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

• Parallax Layers
• Scroll Image Sequence
• Pinned Panels