Отраслевые секции
Подборка объектов с фильтром
Сетка объектов недвижимости: цена серифом крупно, метры, комнаты, этаж, район и метро; метка «новостройка» или «срочно». Чипы типов фильтруют без перезагрузки, по наведению фото меняется на второе, по клику карточка едет в центр экрана, растёт и переворачивается в окно: второе фото во весь кадр, описание, плюсы и ссылка на объект.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- listings: объекты, два фото (image и imageHover — второе идёт в окно), метки, text и features, ссылки
- eyebrow, title, lede, allLabel, moreLabel, moreHref, flipHint, openLabel, closeLabel
- accent и background, tone
Собран из
Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/realty-003?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<Realty003
title="Объекты, за которые мы ручаемся"
listings={[
{ title: "Двушка на Петроградской", price: "18 900 000 ₽", kind: "Квартиры", area: "64 м²", rooms: "2 комнаты", floor: "4 из 6", district: "Петроградская", metro: "Чкаловская, 7 мин", image: "/photos/object-01.webp", badge: "эксклюзив", text: "Кухня-гостиная 24 м², две изолированные спальни.", features: ["Дом 1912 года", "Потолки 3,4 м"], href: "/objects/1" },
]}
/>Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Тема
tone· по умолчанию: auto- Заголовок
title· по умолчанию: Объекты, за которые мы ручаемся- Чип «все»
allLabel· по умолчанию: Все- Подсказка
flipHint· по умолчанию: подробнее- Акцент
accent· по умолчанию: цвет темы- Фон
background· по умолчанию: цвет темы
Используется в сценариях
- Агентство недвижимостиПодборка объектов
Ещё в разделе «Отраслевые секции»
Частые вопросы
- Как установить компонент «Подборка объектов с фильтром» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Подборка объектов с фильтром»?
- npm-пакеты: react-dom. Вместе с ним ставятся компоненты каталога: button-016, button-077.
- Что можно поменять в компоненте «Подборка объектов с фильтром»?
- Можно менять: listings: объекты, два фото (image и imageHover — второе идёт в окно), метки, text и features, ссылки; eyebrow, title, lede, allLabel, moreLabel, moreHref, flipHint, openLabel, closeLabel; accent и background, tone. Сохранить как есть: импорты button-016, button-077 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; цену серифом крупно над названием — по ней сканируют подборку; перелёт карточки в окно одним движением: копия в портале, анимируется только transform (translate, scale, rotateY), reflow и requestAnimationFrame перед стартом.
- Компонент «Подборка объектов с фильтром» бесплатный?
- Превью открыто всем, исходник доступен по подписке PRO.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/realty-003.jsonnpm-зависимости: react-dom
Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Составной блок: импортирует button-016, button-077 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Один файл, зависимость только react-dom (createPortal), «use client». Типы выводятся из listings (уникальные kind), чип «все» — allLabel; активный чип залит цветом текста. Сетка 1/2/3 колонки по container query, li появляются @keyframes с задержкой --n×70ms. Карточка — div role=button: media с двумя <img> (imageHover поверх с opacity 0 → 1 по hover, оба scale 1.05), цена, параметры, чип-подсказка. По клику измеряется getBoundingClientRect, в body через портал рендерится слой position:fixed с perspective:1400px, подложкой и летуном: absolute в размере и позиции окна (карточка ×1.35 по центру, не больше экрана), transform-style:preserve-3d, стартовый transform translate/scale ставит его ровно на карточку; оригинал прячется. После reflow и requestAnimationFrame transform становится translate(0) scale(1) rotateY(180deg) за .5s cubic-bezier(.2,.9,.25,1) — перелёт, рост и переворот одним движением, анимируется только transform (композитный слой, без перерасчёта раскладки). Стороны — backface-visibility:hidden и translateZ(1px); лицевая — копия карточки, обратная несёт imageHover во весь кадр и стеклянную панель с ценой, названием, text, features и ссылкой openLabel; клик по стороне переворачивает окно, крестик есть на обеих сторонах, скрытая сторона inert. Закрытие — стартовый transform назад, фокус возвращается на карточку. Пока открыто: body overflow:hidden с компенсацией скроллбара, Escape закрывает, Tab зациклен в окне. При смене фильтра список пересобирается с новым key. Палитра --vibeui-realty-003-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; шрифты Cormorant Garamond и Manrope подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.
Теги
- real estate
- realty
- property
- apartment
- agency
- listing
- realty
- modal
- flip
- lightbox
- composite
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…