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.
Use cases
Complete patterns by outcome — live demo, the code, and a shadcn install for each.
- Netflix-style rowPoster cards, hover arrows over the edges, edge fade, drag.
- Scrollable tabsA tab strip that overflows gracefully and centers the active tab.
- Filter chipsA chip bar that scrolls new filters into view without breaking clicks.
- Category railA storefront department row: edge-aware arrows, lazy images, analytics.
- Testimonial carouselReview cards that snap to the center and fan out — CSS, not a slider engine.
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.
Layout
Recipes
- Infinite loopSeamless looping from the public API — no library changes.
- AutoplayA self-advancing loop with accessible pause behavior.
- Scrollable tabs beyond MUIKeep MUI’s value/onChange contract; swap the strip underneath.
- Scroll snap carouselCards snap to the center and fan out in CSS — no carousel engine.