Blocks
Horizontal scroll block
A section that turns the page's scroll sideways: while pinned, scrolling down moves a row of panels from right to left with a thin progress line, then the page carries on.
pnpm dlx shadcn@latest add @caliper/horizontal-scroll-blockUse cases
One ledger, many teams
Agencies
Client entities side by side, each with its own rules.
Logistics
Fuel cards and freight invoices matched by route.
Research
Grants tracked by project, with spend against budget.
Retail
Daily takings reconciled across stores and terminals.
Non-profits
Restricted funds kept apart, reported the way boards ask.
When to use
Use it for
- A sequence of four to eight panels: a process, a timeline, a set of use cases.
- A landing page that wants one change of pace.
Skip it when
- More than one per page.
- Content people need to compare.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Speed matches the scroll
- The section is exactly as tall as the sideways distance, so a wheel step moves the row by the same amount.
- A swipe row on phones
- Below 768px and under reduced motion it is an ordinary row with snap points; nothing is pinned.
Installation
pnpm dlx shadcn@latest add @caliper/horizontal-scroll-block
Adds its 6 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { HorizontalScrollBlock } from "@/components/ui/horizontal-scroll-block"
The worked example comes with Pro
The 20-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
HorizontalScrollBlock
component
Accessibility
It is built on native elements and keeps aria-label and aria-hidden in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.