VibeUI
РусEng
Войти

Шапка сайта

Шапка автосервиса с эмблемой и живым статусом бокса

Липкая шапка автосервиса или детейлинга в строгой премиальной подаче: круглая эмблема с номером бокса и название в разрядку, разделы заглавными через тонкие разделители — черта под пунктом растёт из центра, статус бокса с живой точкой, телефон и контурная кнопка «Записаться», которая по наведению заливается светлым. При прокрутке — стекло с блюром и тонкая линия-лампа по низу. На узком разделы уходят в бургер-меню.

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

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

  • brand, emblem, brandHref, status, links: label, href
  • phone, phoneHref, actionLabel, actionHref
  • sticky

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

Превью

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

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

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

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

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

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

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

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

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

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

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

<Navbar034
  brand="Гараж 42"
  status="сейчас свободен подъёмник №2"
  links={[{ label: "Услуги", href: "#services" }, { label: "Контакты", href: "#contacts" }]}
  phone="+7 (812) 420-42-42"
  actionLabel="Записаться"
/>

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

Настройки

Бренд
brand · по умолчанию: Гараж 42
Статус
status · по умолчанию: Свободен бокс № 2
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

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

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

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

Как установить компонент «Шапка автосервиса с эмблемой и живым статусом бокса» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Шапка автосервиса с эмблемой и живым статусом бокса»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Шапка автосервиса с эмблемой и живым статусом бокса»?
Можно менять: brand, emblem, brandHref, status, links: label, href; phone, phoneHref, actionLabel, actionHref; sticky. Сохранить как есть: эмблема — круг с номером из brand (или emblem) и двойной окантовкой: рамка + акцентное кольцо через inset box-shadow; разделы — заглавные с разрядкой .26em, разделитель — ::before у a + a, черта — ::after со scaleX из центра; линия по низу — ::after с градиентом, opacity растёт вместе с data-scrolled.
Компонент «Шапка автосервиса с эмблемой и живым статусом бокса» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

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

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

Теги

  • navbar
  • header
  • auto
  • car service
  • detailing
  • sticky
  • status
  • live
  • burger
  • phone
  • emblem
  • premium
Исходник компонента

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

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