Первый экран
Светлый первый экран
Светлый первый экран для лендинга: кремовая бумага, тёплое пятно под заголовком, крупная типографика и две кнопки. Остаётся светлым, даже когда сайт в тёмной теме. Меняются заголовок, подпись, кнопки и акцентный цвет.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- тексты eyebrow, title, titleAccent, lede и note
- подписи и адреса кнопок: primaryLabel, primaryHref, secondaryLabel, secondaryHref
- акцентный цвет через проп accent — от него зависят пятно, подчёркивание и заливка кнопки
Собран из
Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/hero-018?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<Hero018 title="Соберите лендинг, который" titleAccent="выглядит дорого" />Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Тема
tone· по умолчанию: auto- Заголовок
title· по умолчанию: Соберите лендинг, который- Хвост заголовка
titleAccent· по умолчанию: выглядит дорого- Главная кнопка
primaryLabel· по умолчанию: Начать бесплатно- Акцент
accent· по умолчанию: цвет темы
Ещё в разделе «Первый экран»
Частые вопросы
- Как установить компонент «Светлый первый экран» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Светлый первый экран»?
- Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: button-016, heading-001.
- Что можно поменять в компоненте «Светлый первый экран»?
- Можно менять: тексты eyebrow, title, titleAccent, lede и note; подписи и адреса кнопок: primaryLabel, primaryHref, secondaryLabel, secondaryHref; акцентный цвет через проп accent — от него зависят пятно, подчёркивание и заливка кнопки. Сохранить как есть: импорты button-016, heading-001 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; светлую палитру: блок задуман как кремовый лист и не переключается на тёмную ветку — не переводите его переменные на light-dark(); строку color-scheme:light на корне: без неё браузер нарисует фокусные кольца и выделение текста по тёмной ветке поверх светлого фона.
- Компонент «Светлый первый экран» бесплатный?
- Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/hero-018.jsonКоманде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Составной блок: импортирует button-016, heading-001 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Серверный компонент, один файл, ноль зависимостей. Палитра --vibeui-hero-018-* задана явными значениями oklch, без light-dark(): светлота — суть блока, поэтому на тёмной странице он остаётся кремовым листом. По той же причине на корне объявлен color-scheme:light, иначе браузер рисовал бы фокусные кольца и выделение текста по тёмной ветке поверх светлого фона. Фон декорирует один слой [data-part="canvas"]: две повторяющиеся линейные заливки дают сетку 4rem, radial-gradient в mask-image гасит её к краям, а ::after кладёт под заголовок тёплое пятно из акцента. Цвет текста на акцентной кнопке считается из светлоты самого акцента через oklch(from …), поэтому светлый пользовательский акцент не даст белого по жёлтому. Заголовок набран clamp(2rem,7cqi,4.25rem) от ширины блока, хвост titleAccent подчёркнут мягкой заливкой через linear-gradient. Кнопкам задан min-height, а не height: длинный перевод переносится на вторую строку и не вылезает. Отступы кадра растут container-запросами на 40rem и 64rem.
Теги
- hero
- light
- cream
- typography
- grid
- landing
- composite
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…