VibeUI
РусEng
Войти

Раскладки и бенто

Bento-витрина

Bento-сетка из шести плиток разного веса: ведущая 2×2 с живым свечением, высокий список, широкое доказательство, показатель, иконка и график. Иерархия размером, а не цветом. Для витрины возможностей, «о нас», обзора сервиса и кейсов. Появление по прокрутке, свет за курсором, номера плиток для наполнения. Ноль зависимостей.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • heading и lead — заголовок и подзаголовок над сеткой; без них — призрак
  • items — до шести плиток по порядку: ведущая, показатель (value), список, иконка, доказательство, график; title/text/value/media
  • media — свой кадр, видео или фон из категории «Фон» (surface-*) внутри плитки, ложится под текст

Собран из

Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Bento-витрина — Bento-сетка из шести плиток разного веса: ведущая 2×2 с живым свечением, высокий список, широкое доказательство, показатель, иконка и график. Иерархия размером, а не цветом. Для витрины возможностей, «о нас», обзора сервиса и кейсов. Появление по прокрутке, свет за курсором, номера плиток для наполнения. Ноль зависимостей.

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

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

добавь это на главную первым экраном:

https://vibeui.ru/c/layout-001?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

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

Загружается…

Как использовать

<Layout001
  heading="Всё, что нужно команде"
  lead="Шесть причин выбрать нас — в одной сетке."
  items={[
    { title: "Ведущая возможность", text: "Коротко о главном." },
    { value: "84%", text: "команд остаются через год" },
    { title: "Что внутри", text: "Список возможностей." },
    { title: "Быстрый старт", text: "Первый проект за час." },
    { title: "Нам доверяют", text: "12 000 команд." },
    { title: "Рост", text: "Метрика за квартал." },
  ]}
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Ведущая
side · по умолчанию: left
Скругление
radius · по умолчанию: soft
Номера
numbers · по умолчанию: включено
Акцент
accent · по умолчанию: цвет темы

Ещё в разделе «Раскладки и бенто»

Частые вопросы

Как установить компонент «Bento-витрина» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Bento-витрина»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: card-061.
Что можно поменять в компоненте «Bento-витрина»?
Можно менять: heading и lead — заголовок и подзаголовок над сеткой; без них — призрак; items — до шести плиток по порядку: ведущая, показатель (value), список, иконка, доказательство, график; title/text/value/media; media — свой кадр, видео или фон из категории «Фон» (surface-*) внутри плитки, ложится под текст. Сохранить как есть: импорты card-061 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; локальную палитру --vibeui-layout-001-* и не подменять её токенами вашей темы; асимметрию: ведущая 2×2, список на три ряда, доказательство на две колонки — равные карточки убивают bento.
Компонент «Bento-витрина» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

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

npx shadcn@latest add https://vibeui.ru/r/pro/layout-001.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Составной блок: импортирует card-061 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Один файл, ноль зависимостей, JS только для света за курсором. CSS Grid с grid-template-areas по container-запросам: одна колонка, с 40rem две, с 64rem четыре (4×3, области lead/stat/list/icon/proof/chart); data-side=right зеркалит области. Порядок DOM = порядок чтения на любой ширине. Ведущая плитка — два radial-gradient, координаты которых анимированы @keyframes через @property (без JS). Появление — по прокрутке (animation-timeline: view(), диапазон entry 0–35%), без поддержки — каскад при загрузке. Наведение: подъём, свет за курсором и подсветка кромки в точке указателя (координаты в CSS-переменных плитки через rAF, только мышь), отклик иконки, аватаров и графика. Номера 01–06 (numbers) — подсказка для наполнения. Слоты: items[0..5] с title/text/value/media; без них — призрак. Палитра --vibeui-layout-001-* с light-dark, accent — цвет иконок, кнопки и свечения.

Теги

  • layout
  • bento
  • grid
  • tiles
  • features
  • showcase
  • apple
  • cards
  • composite
Исходник компонента

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

Загружается…