VibeUI

Carousel

Peek Cards

Лента карточек, где следующая выглядывает за краем: обрезанная карточка — единственный честный сигнал, что список продолжается.

  • carousel
  • cards
  • scroll
  • peek

Превью

1440pxHost theme

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

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

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

Читать дальше

  • Как собрать лендинг за вечер8 минут чтения
  • Что отдать агенту, а что править руками6 минут
  • Токены темы без боли11 минут
  • Почему компонент — один файл5 минут
Показать полную инструкцию

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

# Установка и размещение «carousel-002» (Peek Cards) из VibeUI

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

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

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

## 2. Что это
Лента карточек, где следующая выглядывает за краем: обрезанная карточка — единственный честный сигнал, что список продолжается.

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

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

<Carousel002 items={items} label="Читать дальше" />

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-carousel-002-* и не подменять её токенами вашей темы
- выглядывающую следующую карточку: это единственный честный сигнал продолжения
- прокрутку на ширину кадра вместо «одной карточки»
- нативную прокрутку под стрелками: палец и колесо не должны отключаться
- имена стрелок в aria-label — «влево» ничего не говорит о содержимом
- scroll-behavior: auto при prefers-reduced-motion

## 6. Можно менять
- массив items и их оттенки
- label — заголовок ленты
- долю ширины карточки
- акцент через проп accent

## 7. Правила
- Стрелки не блокируются на краях: браузер сам останавливает прокрутку, а мигающая кнопка отвлекает сильнее.
- Ширина карточки в процентах, поэтому на широком экране их видно больше — так и задумано.
- Карточки не кликабельны: ссылки навешивает вызывающий код.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

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

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-carousel-002-*. Клиентский: "use client", ссылка на ленту через useRef. Стрелки вызывают scrollBy на 80% ширины кадра, а не на «одну карточку»: число карточек в кадре меняется от ширины. Ширина карточки задана процентами, поэтому следующая всегда выглядывает.

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

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

"use client"

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

export type Carousel002Item = {
  title: string
  meta: string
  hue?: number
}

export type Carousel002Props = Omit<
  ComponentPropsWithoutRef<"section">,
  "children"
> & {
  items?: Carousel002Item[]
  label?: string
  accent?: string
}

// Идея компонента: лента карточек, где следующая выглядывает за краем. Это
// не украшение: обрезанная карточка — единственный честный сигнал, что
// список продолжается. Стрелки прокручивают на ширину видимой области через
// scrollBy, а не на «одну карточку»: карточек в кадре бывает разное число.
const STYLES = `
:where([data-vibeui-block="carousel-002"]){
--vibeui-carousel-002-surface:oklch(1 0 0);
--vibeui-carousel-002-bg:oklch(1 0 0);
--vibeui-carousel-002-fg:oklch(0.22 0.014 265);
--vibeui-carousel-002-muted:oklch(0.58 0.014 265);
--vibeui-carousel-002-border:oklch(0.91 0.006 265);
--vibeui-carousel-002-accent:oklch(0.55 0.17 265);
--vibeui-carousel-002-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Собственная подложка: заголовок и счётчик — это текст, и на тёмной
   странице он обязан читаться без правки палитры проекта. */
[data-vibeui-block="carousel-002"]{
padding:0.875rem;background:var(--vibeui-carousel-002-surface);
border:1px solid var(--vibeui-carousel-002-border);border-radius:1rem;
display:flex;flex-direction:column;gap:0.625rem;
width:100%;max-width:30rem;box-sizing:border-box;
font-family:var(--vibeui-carousel-002-font);color:var(--vibeui-carousel-002-fg);
}
[data-vibeui-block="carousel-002"] [data-part="head"]{
display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
}
[data-vibeui-block="carousel-002"] [data-part="title"]{margin:0;font-size:0.9375rem;font-weight:650}
[data-vibeui-block="carousel-002"] [data-part="nav"]{display:flex;gap:0.375rem}
[data-vibeui-block="carousel-002"] [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-002-border);border-radius:0.5rem;
background:var(--vibeui-carousel-002-bg);color:inherit;
}
[data-vibeui-block="carousel-002"] [data-part="nav"] button:hover{background:oklch(0.96 0.004 265)}
[data-vibeui-block="carousel-002"] [data-part="nav"] button:focus-visible{outline:2px solid var(--vibeui-carousel-002-accent);outline-offset:2px}
[data-vibeui-block="carousel-002"] [data-part="arrow"]{
width:0.375rem;height:0.375rem;
border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:rotate(45deg) translate(0.0625rem,-0.0625rem);
}
[data-vibeui-block="carousel-002"] [data-part="arrow"][data-dir="next"]{transform:rotate(-135deg) translate(0.0625rem,-0.0625rem)}
/* Ширина карточки в процентах от ленты: следующая всегда выглядывает. */
[data-vibeui-block="carousel-002"] [data-part="track"]{
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-002"] [data-part="track"]::-webkit-scrollbar{display:none}
[data-vibeui-block="carousel-002"] [data-part="card"]{
flex:0 0 62%;scroll-snap-align:start;
display:flex;flex-direction:column;gap:0.5rem;
padding:0.75rem;box-sizing:border-box;
border:1px solid var(--vibeui-carousel-002-border);border-radius:0.875rem;
background:var(--vibeui-carousel-002-bg);
}
[data-vibeui-block="carousel-002"] [data-part="cover"]{
aspect-ratio:16 / 10;border-radius:0.625rem;
background:
radial-gradient(90% 80% at 25% 20%,oklch(0.92 0.06 var(--vibeui-carousel-002-hue,250)),transparent 70%),
linear-gradient(150deg,oklch(0.8 0.08 var(--vibeui-carousel-002-hue,250)),oklch(0.55 0.1 var(--vibeui-carousel-002-hue,250)));
}
[data-vibeui-block="carousel-002"] [data-part="card-title"]{font-size:0.875rem;font-weight:650;line-height:1.3}
[data-vibeui-block="carousel-002"] [data-part="meta"]{font-size:0.75rem;color:var(--vibeui-carousel-002-muted)}
@media (min-width: 40rem){
[data-vibeui-block="carousel-002"] [data-part="card"]{flex-basis:38%}
}
@media (prefers-reduced-motion:reduce){
[data-vibeui-block="carousel-002"] *{animation:none!important;transition:none!important}
[data-vibeui-block="carousel-002"] [data-part="track"]{scroll-behavior:auto}
}
`

const DEFAULT_ITEMS: Carousel002Item[] = [
  { title: "Как собрать лендинг за вечер", meta: "8 минут чтения", hue: 250 },
  {
    title: "Что отдать агенту, а что править руками",
    meta: "6 минут",
    hue: 150,
  },
  { title: "Токены темы без боли", meta: "11 минут", hue: 30 },
  { title: "Почему компонент — один файл", meta: "5 минут", hue: 300 },
]

/**
 * Лента карточек с подглядыванием следующей и прокруткой на ширину кадра.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Carousel002({
  items = DEFAULT_ITEMS,
  label = "Читать дальше",
  accent,
  className,
  style,
  ...props
}: Carousel002Props) {
  const track = useRef<HTMLUListElement>(null)

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

  // Прокрутка на ширину кадра, а не на «одну карточку»: в кадре их бывает
  // одна на телефоне и две с половиной на десктопе.
  const scroll = (direction: 1 | -1) => {
    const node = track.current
    if (!node) return
    node.scrollBy({ left: direction * node.clientWidth * 0.8 })
  }

  return (
    <>
      <style href="vibeui-carousel-002" precedence="medium">
        {STYLES}
      </style>
      <section
        {...props}
        data-vibeui-block="carousel-002"
        aria-roledescription="карусель"
        aria-label={label}
        className={className}
        style={palette}
      >
        <div data-part="head">
          <h3 data-part="title">{label}</h3>
          <div data-part="nav">
            <button
              type="button"
              aria-label="Предыдущие карточки"
              onClick={() => scroll(-1)}
            >
              <span data-part="arrow" aria-hidden="true" />
            </button>
            <button
              type="button"
              aria-label="Следующие карточки"
              onClick={() => scroll(1)}
            >
              <span data-part="arrow" data-dir="next" aria-hidden="true" />
            </button>
          </div>
        </div>
        <ul data-part="track" ref={track} tabIndex={0}>
          {items.map((item) => (
            <li
              key={item.title}
              data-part="card"
              style={
                {
                  "--vibeui-carousel-002-hue": item.hue ?? 250,
                } as CSSProperties
              }
            >
              <span data-part="cover" aria-hidden="true" />
              <span data-part="card-title">{item.title}</span>
              <span data-part="meta">{item.meta}</span>
            </li>
          ))}
        </ul>
      </section>
    </>
  )
}