Examples: every pattern, live, with the full source
Each example is a working demo of the published npm package plus the complete file behind it — copy-paste ready, and editable live in Storybook. Server-rendered like everything else on this site.
Basics
Position & scrolling
- Center the clicked itemscrollToItem with inline: center — the scrollable-tabs pattern.
- Scroll to an item by idReach into the menu from outside with apiRef.
- Save and restore scroll positionKeep the scroll offset across unmounts and page reloads.
- Custom scroll animationBring your own easing and duration for programmatic scrolls.
- Scroll progress indicatorA progress bar driven by which items are visible.
Input & gestures
Dynamic items
- Load more when the end shows upInfinite append driven by last-item visibility.
- Add an item and scroll to itThe filter-chips pattern: append, then bring into view.
- Animate items in and outAdd/remove animations with @formkit/auto-animate.
- 5,000 items and still fastNative scrolling scales — no virtualization needed here.