Примеры: каждый паттерн живьём, с полным исходником
Каждый пример — это работающая демонстрация опубликованного npm-пакета плюс полный файл за ней: готово к копированию и редактируется вживую в Storybook. Рендерится на сервере, как и всё остальное на этом сайте.
Сценарии использования
Готовые паттерны по задачам — живое демо, код и установка через shadcn.
- Ряд в стиле NetflixКарточки-постеры, стрелки поверх краёв при наведении, затухание краёв, перетаскивание.
- Прокручиваемые вкладкиПолоса вкладок, которая аккуратно прокручивается и центрирует активную вкладку.
- Чипы-фильтрыПанель чипов, которая прокручивает новые фильтры в видимую область, не ломая клики.
- Рейл категорийРяд разделов магазина: стрелки, знающие края, ленивые изображения, аналитика.
- Карусель отзывовКарточки отзывов прилипают к центру и раскрываются веером — на CSS, без движка слайдера.
Основы
- Начало работыМинимальное меню: элементы, две стрелки, видимость из коробки.
- Один элемент на экранМеню шириной в один элемент — одна карточка заполняет ряд.
- Прокрутка по одному элементуСтрелки продвигают один элемент вместо целой страницы.
- Стрелки под менюСтрелки — ваши компоненты, размещайте их где угодно.
Позиция и прокрутка
- Центрировать кликнутый элементscrollToItem с inline: center — паттерн прокручиваемых вкладок.
- Прокрутить к элементу по idДоберитесь до меню извне с помощью apiRef.
- Сохранение и восстановление позиции прокруткиСохраняйте смещение прокрутки между размонтированиями и перезагрузками.
- Кастомная анимация прокруткиСвой easing и длительность для программной прокрутки.
- Индикатор прогресса прокруткиПолоса прогресса, управляемая тем, какие элементы видны.
Ввод и жесты
- Прокрутка перетаскиванием мышьюПеретаскивание мышью, которое не ломает клики по элементам.
- Свайп на десктопеСвайп с инерцией для пользователей мыши.
- Скрыть стрелки на мобильныхНа малых экранах — только сенсорная прокрутка, на десктопе — стрелки.
- Заблокировать прокрутку страницыКолесо над меню прокручивает меню, а не страницу.
Динамические элементы
- Подгружать, когда виден конецБесконечное добавление, управляемое видимостью последнего элемента.
- Добавить элемент и прокрутить к немуПаттерн чипов-фильтров: добавить, затем привести в видимость.
- Анимация появления и исчезновения элементовАнимации добавления/удаления с @formkit/auto-animate.
- 5000 элементов — и всё равно быстроНативная прокрутка масштабируется — виртуализация не нужна.
Раскладка
Рецепты
- Бесконечный циклБесшовный цикл на публичном API — без изменений в библиотеке.
- АвтовоспроизведениеСамо-продвигающийся цикл с доступным поведением паузы.
- Прокручиваемые вкладки за пределами MUIСохраните контракт value/onChange от MUI и замените полосу под капотом.
- Карусель с привязкой прокруткиКарточки прилипают к центру и раскрываются веером на CSS — без движка карусели.