VibeUI

Carousel

Shop Rail

Витрина товаров, где следующая карточка выглядывает за краем, а стрелки гаснут на концах ленты: отключённая стрелка отвечает «дальше пусто» до нажатия.

  • carousel
  • products
  • peek
  • shop

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/carousel-010

Часто покупают

  • скидка
    Кофемолка ручная4 290 ₽5 900 ₽★ 4.8
  • Чайник на 1,2 л3 150 ₽★ 4.6
  • скидка
    Френч-пресс стеклянный1 890 ₽2 400 ₽★ 4.4
  • Весы кухонные2 750 ₽★ 4.9
  • Термос 0,5 л2 190 ₽★ 4.5
Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «carousel-010» (Shop Rail) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/carousel-010.json

Registry item: https://vibeui.ru/r/carousel-010.json
Ставится в: components/vibeui/carousel-010.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Витрина товаров, где следующая карточка выглядывает за краем, а стрелки гаснут на концах ленты: отключённая стрелка отвечает «дальше пусто» до нажатия.

Лента товаров с выглядывающей карточкой, шагом ровно в карточку и стрелками, гаснущими на краях. Ноль зависимостей, один файл.

## 3. Как использовать
import { Carousel010 } from "@/components/vibeui/carousel-010"

<Carousel010
  title="Часто покупают"
  products={[
    { title: "Кофемолка ручная", price: "4 290 ₽", oldPrice: "5 900 ₽", rating: 4.8, hue: 40 },
    { title: "Чайник на 1,2 л", price: "3 150 ₽", rating: 4.6, hue: 200 },
  ]}
/>

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-carousel-010-* и не подменять её токенами вашей темы
- выглядывающую карточку: обрезанный край — единственный честный сигнал, что список продолжается
- отключение стрелок атрибутом disabled, а не стилем: серая, но нажимаемая кнопка врёт
- шаг ровно в ширину карточки — иначе лента замирает на половине товара
- нативную прокрутку со scroll-snap: палец, колесо и клавиатура работают без обработчиков
- собственную светлую подложку: цены и названия — тёмный текст

## 6. Можно менять
- товары через products: название, цена, старая цена, рейтинг и оттенок
- заголовок витрины через title
- цвет акцента через accent
- долю ширины карточки в правиле flex:0 0 44%

## 7. Правила
- Цена — строка: форматирование и валюту подставляет приложение.
- Карточка не ссылка: оборачивать её в <a> и держать доступное имя придётся вам.
- Состояние краёв пересчитывается на прокрутке — при программном изменении списка вызовите его сами.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/carousel-010.json
https://vibeui.ru/r/carousel-010.json

Компонент самодостаточен: один файл, без зависимостей, палитра в локальных переменных --vibeui-carousel-010-*. Клиентский ("use client") — состояние краёв считается на прокрутке. Лента остаётся нативной прокруткой со scroll-snap: палец и колесо работают сами. Шаг стрелки равен ширине карточки с зазором, поэтому лента останавливается ровно на карточке, а не в середине. Позиция краёв пересчитывается в обработчике onScroll и один раз после монтирования: кнопки отключаются атрибутом disabled, а не стилем, чтобы они выпадали из порядка обхода.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

"use client"

import { useEffect, useRef, useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Carousel010Product = {
  title: string
  price: string
  oldPrice?: string
  rating?: number
  hue?: number
}

export type Carousel010Props = Omit<
  ComponentPropsWithoutRef<"section">,
  "children"
> & {
  products?: Carousel010Product[]
  title?: string
  accent?: string
}

// Идея компонента: витрина товаров, где следующая карточка выглядывает из-за
// края, а стрелки честно гаснут на концах ленты. Отключённая стрелка — это
// ответ на вопрос «дальше есть что-нибудь»: без него пользователь жмёт в
// пустоту. Шаг прокрутки равен ширине карточки с зазором, поэтому лента
// останавливается ровно на карточке, а не в середине.
const STYLES = `
:where([data-vibeui-block="carousel-010"]){
--vibeui-carousel-010-bg:oklch(1 0 0);
--vibeui-carousel-010-fg:oklch(0.22 0.014 265);
--vibeui-carousel-010-muted:oklch(0.58 0.014 265);
--vibeui-carousel-010-border:oklch(0.91 0.006 265);
--vibeui-carousel-010-accent:oklch(0.55 0.19 25);
--vibeui-carousel-010-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="carousel-010"]{
display:flex;flex-direction:column;gap:0.625rem;
width:100%;max-width:30rem;box-sizing:border-box;padding:0.875rem;
background:var(--vibeui-carousel-010-bg);
border:1px solid var(--vibeui-carousel-010-border);border-radius:1rem;
font-family:var(--vibeui-carousel-010-font);color:var(--vibeui-carousel-010-fg);
}
[data-vibeui-block="carousel-010"] [data-part="head"]{display:flex;align-items:center;justify-content:space-between;gap:0.75rem}
[data-vibeui-block="carousel-010"] [data-part="title"]{margin:0;font-size:0.9375rem;font-weight:650}
[data-vibeui-block="carousel-010"] [data-part="nav"]{display:flex;gap:0.375rem}
[data-vibeui-block="carousel-010"] [data-part="nav"] button{
appearance:none;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
width:2rem;height:2rem;padding:0;
border:1px solid var(--vibeui-carousel-010-border);border-radius:0.5rem;
background:var(--vibeui-carousel-010-bg);color:var(--vibeui-carousel-010-fg);
}
[data-vibeui-block="carousel-010"] [data-part="nav"] button:hover:not(:disabled){background:oklch(0.96 0.004 265)}
[data-vibeui-block="carousel-010"] [data-part="nav"] button:focus-visible{outline:2px solid var(--vibeui-carousel-010-accent);outline-offset:2px}
/* Гаснущая стрелка отвечает «дальше пусто» до нажатия, а не после. */
[data-vibeui-block="carousel-010"] [data-part="nav"] button:disabled{cursor:not-allowed;opacity:.35}
[data-vibeui-block="carousel-010"] [data-part="nav"] svg{width:0.875rem;height:0.875rem;display:block}
[data-vibeui-block="carousel-010"] [data-part="rail"]{
display:flex;gap:0.625rem;margin:0;padding:0 0 0.25rem;list-style:none;
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
}
[data-vibeui-block="carousel-010"] [data-part="rail"]::-webkit-scrollbar{display:none}
/* Карточка занимает меньше половины ширины: соседняя обязана выглядывать. */
[data-vibeui-block="carousel-010"] [data-part="card"]{
flex:0 0 44%;min-width:0;scroll-snap-align:start;
display:flex;flex-direction:column;gap:0.375rem;
}
[data-vibeui-block="carousel-010"] [data-part="shot"]{
position:relative;aspect-ratio:4 / 3;border-radius:0.75rem;overflow:hidden;
background:
radial-gradient(85% 80% at 25% 20%,oklch(0.93 0.05 var(--vibeui-carousel-010-hue,250)),transparent 70%),
linear-gradient(150deg,oklch(0.84 0.07 var(--vibeui-carousel-010-hue,250)),oklch(0.6 0.09 var(--vibeui-carousel-010-hue,250)));
}
[data-vibeui-block="carousel-010"] [data-part="sale"]{
position:absolute;left:0.375rem;top:0.375rem;
padding:0.0625rem 0.375rem;border-radius:9999px;
background:var(--vibeui-carousel-010-accent);color:oklch(1 0 0);
font-size:0.625rem;font-weight:700;
}
[data-vibeui-block="carousel-010"] [data-part="name"]{font-size:0.8125rem;font-weight:600;line-height:1.3}
[data-vibeui-block="carousel-010"] [data-part="row"]{display:flex;align-items:baseline;gap:0.375rem}
[data-vibeui-block="carousel-010"] [data-part="price"]{font-size:0.875rem;font-weight:700;font-variant-numeric:tabular-nums}
[data-vibeui-block="carousel-010"] [data-part="old"]{font-size:0.75rem;color:var(--vibeui-carousel-010-muted);text-decoration:line-through}
[data-vibeui-block="carousel-010"] [data-part="rating"]{
margin-left:auto;font-size:0.6875rem;color:var(--vibeui-carousel-010-muted);
font-variant-numeric:tabular-nums;
}
@media (prefers-reduced-motion:reduce){
[data-vibeui-block="carousel-010"] [data-part="rail"]{scroll-behavior:auto}
[data-vibeui-block="carousel-010"] *{animation:none!important;transition:none!important}
}
`

const DEFAULT_PRODUCTS: Carousel010Product[] = [
  {
    title: "Кофемолка ручная",
    price: "4 290 ₽",
    oldPrice: "5 900 ₽",
    rating: 4.8,
    hue: 40,
  },
  { title: "Чайник на 1,2 л", price: "3 150 ₽", rating: 4.6, hue: 200 },
  {
    title: "Френч-пресс стеклянный",
    price: "1 890 ₽",
    oldPrice: "2 400 ₽",
    rating: 4.4,
    hue: 150,
  },
  { title: "Весы кухонные", price: "2 750 ₽", rating: 4.9, hue: 280 },
  { title: "Термос 0,5 л", price: "2 190 ₽", rating: 4.5, hue: 20 },
]

/**
 * Витрина товаров с выглядывающей карточкой и стрелками, гаснущими на краях.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Carousel010({
  products = DEFAULT_PRODUCTS,
  title = "Часто покупают",
  accent,
  className,
  style,
  ...props
}: Carousel010Props) {
  const rail = useRef<HTMLUListElement>(null)
  const [edge, setEdge] = useState({ start: true, end: false })

  function measure() {
    const node = rail.current
    if (!node) return
    const rest = node.scrollWidth - node.clientWidth - node.scrollLeft
    setEdge({ start: node.scrollLeft <= 1, end: rest <= 1 })
  }

  useEffect(measure, [products])

  function step(direction: 1 | -1) {
    const node = rail.current
    if (!node) return
    const card = node.querySelector("[data-part='card']") as HTMLElement | null
    const width = card ? card.offsetWidth + 10 : node.clientWidth
    node.scrollBy({ left: width * direction })
  }

  const palette = {
    ...(accent ? { "--vibeui-carousel-010-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-carousel-010" precedence="medium">
        {STYLES}
      </style>
      <section
        {...props}
        data-vibeui-block="carousel-010"
        aria-roledescription="карусель"
        aria-label={title}
        className={className}
        style={palette}
      >
        <div data-part="head">
          <h3 data-part="title">{title}</h3>
          <div data-part="nav">
            <button
              type="button"
              aria-label="Предыдущие товары"
              disabled={edge.start}
              onClick={() => step(-1)}
            >
              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor">
                <path
                  d="M10 3 5 8l5 5"
                  strokeWidth="1.6"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </button>
            <button
              type="button"
              aria-label="Следующие товары"
              disabled={edge.end}
              onClick={() => step(1)}
            >
              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor">
                <path
                  d="m6 3 5 5-5 5"
                  strokeWidth="1.6"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </button>
          </div>
        </div>
        <ul data-part="rail" ref={rail} onScroll={measure}>
          {products.map((product) => (
            <li
              data-part="card"
              key={product.title}
              style={
                {
                  "--vibeui-carousel-010-hue": product.hue ?? 250,
                } as CSSProperties
              }
            >
              <div data-part="shot">
                {product.oldPrice ? <span data-part="sale">скидка</span> : null}
              </div>
              <span data-part="name">{product.title}</span>
              <span data-part="row">
                <span data-part="price">{product.price}</span>
                {product.oldPrice ? (
                  <span data-part="old">{product.oldPrice}</span>
                ) : null}
                {product.rating ? (
                  <span data-part="rating">★ {product.rating.toFixed(1)}</span>
                ) : null}
              </span>
            </li>
          ))}
        </ul>
      </section>
    </>
  )
}