VibeUI
РусEng
Войти

Мокап устройства

Окно браузера

Окно браузера на чистом CSS под скриншот сайта: светофор, вкладка с заголовком, адресная строка с замком, светлый или тёмный хром и тень. Адрес и заголовок меняются пропами, а не в редакторе.

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

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

  • src и alt — свой скриншот
  • children — живая страница внутри окна
  • url и title — адрес и заголовок вкладки

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

Превью

1440pxТема страницы
Окно браузера — Окно браузера на чистом CSS под скриншот сайта: светофор, вкладка с заголовком, адресная строка с замком, светлый или тёмный хром и тень. Адрес и заголовок меняются пропами, а не в редакторе.

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

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

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

https://vibeui.ru/c/mockup-004?theme=dark

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

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

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

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

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

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

<Mockup004 src="/screens/site.png" alt="Главная страница" url="example.com" title="Главная" theme="light" />

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

Настройки

Хром
theme · по умолчанию: light
Тень
shadow · по умолчанию: включено
Адрес
url · по умолчанию: vibeui.dev
Вкладка
title · по умолчанию: Главная
Подпись
caption

Ещё в разделе «Мокап устройства»

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

Как установить компонент «Окно браузера» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Окно браузера»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Окно браузера»?
Можно менять: src и alt — свой скриншот; children — живая страница внутри окна; url и title — адрес и заголовок вкладки. Сохранить как есть: локальную палитру --vibeui-mockup-004-* и не подменять её токенами вашей темы; кегли хрома в clamp() от cqw — на широком кадре хром не должен вырастать, на узком — слипаться; две полосы хрома: вкладки и адрес — по ним окно узнаётся как браузер.
Компонент «Окно браузера» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

npx shadcn@latest add https://vibeui.ru/r/pro/mockup-004.json

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

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

Серверный компонент, хуков нет. Хром окна — две полосы: вкладки (светофор, активная вкладка с фавиконом и заголовком, кнопка «+») и панель адреса (стрелки истории, поле с замком-SVG и адресом, меню). Кегли и отступы в clamp() от cqw, поэтому хром не расползается на широком кадре и не слипается на узком. Тема хрома задаётся data-chrome и не следует за темой страницы: окно — часть кадра. Область страницы 16/10: src (object-fit: cover по верху), иначе children, иначе заглушка-каркас лендинга. Тень — box-shadow на окне, включается data-shadow.

Теги

  • browser
  • window
  • chrome
  • safari
  • mockup
  • frame
  • screenshot
  • website
Исходник компонента

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

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