VibeUI
РусEng
Войти

Отраслевые секции

Уход за цветами: аккордеон с прорисовкой иконок и счётчик букетов

Секция ухода: слева заголовок и большой счётчик «букетов на этой неделе», который докручивается, когда попадает в экран (IntersectionObserver + rAF, кубический ease-out), с рукописной пометкой; справа аккордеон советов. У каждого пункта линейная иконка (ножницы, вода, солнце, термометр, ваза), которая прорисовывается штрихом при раскрытии через stroke-dashoffset и pathLength=100; панель раскрывается через grid-template-rows 0fr → 1fr.

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

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

  • eyebrow, title, lede
  • items: title, text, icon (scissors | water | sun | thermometer | vase)
  • counter, counterLabel, counterNote, defaultOpen

Собран из

Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.

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

Превью

1440pxТема страницы
Уход за цветами: аккордеон с прорисовкой иконок и счётчик букетов — Секция ухода: слева заголовок и большой счётчик «букетов на этой неделе», который докручивается, когда попадает в экран (IntersectionObserver + rAF, кубический ease-out), с рукописной пометкой; справа аккордеон советов. У каждого пункта линейная иконка (ножницы, вода, солнце, термометр, ваза), которая прорисовывается штрихом при раскрытии через stroke-dashoffset и pathLength=100; панель раскрывается через grid-template-rows 0fr → 1fr.

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

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

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

https://vibeui.ru/c/flowers-005?theme=dark

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

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

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

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

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

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

<Flowers005
  title="Чтобы стояли дольше"
  counter={312}
  counterLabel="букетов собрали на этой неделе"
  items={[{ title: "Подрежьте стебли наискосок", text: "Два сантиметра под углом 45°.", icon: "scissors" }]}
/>

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

Настройки

Заголовок
title · по умолчанию: Чтобы стояли дольше
Счётчик
counter · по умолчанию: 312
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

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

Ещё в разделе «Отраслевые секции»

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

Как установить компонент «Уход за цветами: аккордеон с прорисовкой иконок и счётчик букетов» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Уход за цветами: аккордеон с прорисовкой иконок и счётчик букетов»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: button-082.
Что можно поменять в компоненте «Уход за цветами: аккордеон с прорисовкой иконок и счётчик букетов»?
Можно менять: eyebrow, title, lede; items: title, text, icon (scissors | water | sun | thermometer | vase); counter, counterLabel, counterNote, defaultOpen. Сохранить как есть: импорты button-082 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; иконки — svg path/circle с pathLength=100, stroke-dasharray 100, dashoffset 100 → 0 при aria-expanded=true, второй и третий штрих с задержкой .15/.3 с; панель — [data-part=panel] с grid-template-rows 0fr/1fr и внутренним overflow:hidden, .45s cubic-bezier.
Компонент «Уход за цветами: аккордеон с прорисовкой иконок и счётчик букетов» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

npx shadcn@latest add https://vibeui.ru/r/pro/flowers-005.json

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

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

Составной блок: импортирует button-082 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает.

Теги

  • flowers
  • care
  • faq
  • accordion
  • counter
  • icons
  • line drawing
  • tips
  • stats
  • composite
Исходник компонента

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

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