VibeUI
РусEng
Войти

Шапка сайта

Шапка ветклиники: прозрачная поверх хиро, живой статус «открыто»

Липкая шапка клиники или салона в строгом стиле: лапа в тонком кольце, название разрядкой, меню тонким шрифтом. Статус часов сам считает по времени посетителя — «открыто до 21:00», «закроемся через 40 мин» или «откроемся в 9:00». С overlay вверху страницы шапка прозрачная и первый экран идёт от самого верха, при прокрутке сжимается в стеклянную полосу. Телефон, кнопка записи, бургер на узком.

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

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

  • brand, caption, brandHref, links: label, href
  • opensAt, closesAt (часы), phone, phoneHref
  • actionLabel, actionHref, sticky, overlay

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

Превью

1440pxТема страницы
Шапка ветклиники: прозрачная поверх хиро, живой статус «открыто» — Липкая шапка клиники или салона в строгом стиле: лапа в тонком кольце, название разрядкой, меню тонким шрифтом. Статус часов сам считает по времени посетителя — «открыто до 21:00», «закроемся через 40 мин» или «откроемся в 9:00». С overlay вверху страницы шапка прозрачная и первый экран идёт от самого верха, при прокрутке сжимается в стеклянную полосу. Телефон, кнопка записи, бургер на узком.

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

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

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

https://vibeui.ru/c/navbar-035?theme=dark

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

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

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

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

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

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

<Navbar035
  overlay
  brand="Лапа"
  caption="ветклиника · груминг"
  opensAt={9}
  closesAt={21}
  phone="+7 495 120-24-24"
  links={[{ label: "Услуги", href: "#services" }, { label: "Врачи", href: "#doctors" }]}
/>

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

Настройки

Бренд
brand · по умолчанию: Лапа
Закрываемся в
closesAt · по умолчанию: 21
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

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

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

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

Как установить компонент «Шапка ветклиники: прозрачная поверх хиро, живой статус «открыто»» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Шапка ветклиники: прозрачная поверх хиро, живой статус «открыто»»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Шапка ветклиники: прозрачная поверх хиро, живой статус «открыто»»?
Можно менять: brand, caption, brandHref, links: label, href; opensAt, closesAt (часы), phone, phoneHref; actionLabel, actionHref, sticky, overlay. Сохранить как есть: overlay: шапка вверху прозрачная и не занимает места — margin-bottom равен минус её высоте (--vibeui-navbar-035-h), поэтому при сжатии на прокрутке страница не прыгает; при прокрутке высота строки уменьшается, фон — полупрозрачный цвет фона с backdrop-filter и тонкой линией снизу; статус часов — useSyncExternalStore с серверным снимком null, на сервере нейтральное «9:00–21:00», без гидрационных расхождений.
Компонент «Шапка ветклиники: прозрачная поверх хиро, живой статус «открыто»» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

npx shadcn@latest add https://vibeui.ru/r/pro/navbar-035.json

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

Теги

  • navbar
  • header
  • vet
  • clinic
  • hours
  • open-now
  • phone
  • sticky
  • burger
  • pet
  • transparent
  • overlay
  • glass
Исходник компонента

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

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