VibeUI
РусEng
Войти

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

Интеграции маршрутизатором: входы → ядро продукта → выходы, по линиям бегут пакеты

Секция интеграций в виде схемы: слева входы (сервисы созвонов), в центре ядро продукта с эквалайзером, справа выходы — трекеры, мессенджеры, базы знаний. Всё соединено плавными кривыми, по которым бегут светящиеся пакеты, выход вспыхивает в момент прихода. Наведение на сервис подсвечивает его маршрут. Сверху заголовок и описание, снизу факты в четыре колонки. На узком у сервисов остаются только марки. Знаки сервисов — официальные, из Simple Icons (CC0), встроены в блок.

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

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

  • eyebrow, title, lede, core — имя в центре, coreCaption
  • inner (входы), outer (выходы): name, brand (zoom, googlemeet, vk, webex, jira, notion, telegram, linear, confluence, trello) или свои icon (path 24×24) и color, mark — буквы, если знака нет
  • speed — секунд на проход пакета; facts — «Заголовок: текст»

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

Превью

1440pxТема страницы
Интеграции маршрутизатором: входы → ядро продукта → выходы, по линиям бегут пакеты — Секция интеграций в виде схемы: слева входы (сервисы созвонов), в центре ядро продукта с эквалайзером, справа выходы — трекеры, мессенджеры, базы знаний. Всё соединено плавными кривыми, по которым бегут светящиеся пакеты, выход вспыхивает в момент прихода. Наведение на сервис подсвечивает его маршрут. Сверху заголовок и описание, снизу факты в четыре колонки. На узком у сервисов остаются только марки. Знаки сервисов — официальные, из Simple Icons (CC0), встроены в блок.

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

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

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

https://vibeui.ru/c/bento-002?theme=dark

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

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

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

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

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

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

<Bento002
  core="Tally"
  coreCaption="слушает и раскладывает"
  inner={[{ name: "Zoom", brand: "zoom" }, { name: "Meet", brand: "googlemeet" }]}
  outer={[{ name: "Jira", brand: "jira" }, { name: "Notion", brand: "notion" }, { name: "Telegram", brand: "telegram" }]}
/>

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

Настройки

Центр
core · по умолчанию: Tally
Секунд на оборот
speed · по умолчанию: 2.4
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Используется в сценариях

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

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

Как установить компонент «Интеграции маршрутизатором: входы → ядро продукта → выходы, по линиям бегут пакеты» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Интеграции маршрутизатором: входы → ядро продукта → выходы, по линиям бегут пакеты»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Интеграции маршрутизатором: входы → ядро продукта → выходы, по линиям бегут пакеты»?
Можно менять: eyebrow, title, lede, core — имя в центре, coreCaption; inner (входы), outer (выходы): name, brand (zoom, googlemeet, vk, webex, jira, notion, telegram, linear, confluence, trello) или свои icon (path 24×24) и color, mark — буквы, если знака нет; speed — секунд на проход пакета; facts — «Заголовок: текст». Сохранить как есть: схема — один SVG viewBox 1000×560 с preserveAspectRatio none, плитки лежат в тех же долях поверх — линии и плитки совпадают; пакеты — circle с animateMotion по path через mpath, begin сдвинут по индексу; выход вспыхивает keyframes hit с той же задержкой; наведение на плитку ставит hot — её path и плитка подсвечиваются акцентом.
Компонент «Интеграции маршрутизатором: входы → ядро продукта → выходы, по линиям бегут пакеты» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

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

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

Теги

  • bento
  • integrations
  • logos
  • services
  • connect
  • saas
  • ai
  • animation
  • router
  • flow
  • diagram
  • packets
  • hub
Исходник компонента

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

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