Интерфейс
Мини-панель
Компактная панель метрики: число крутится цифровым барабаном, пока не встанет на нужном значении, а мини-спарклайн рядом дорисовывается слева направо; под карточкой дышит радужное свечение.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- заголовок метрики, значение value и пилюлю trend под свои данные
- направление тренда через trendTone (up/down) — красит пилюлю
- точки мини-графика через spark под реальный ряд данных
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/dashboard-anim-001?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<DashboardAnim001 title="Доход" value="$12 480" trend="+12,4%" trendTone="up" spark={[22, 30, 26, 38, 34, 48, 40, 58, 52, 66]} />Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Тон тренда
trendTone· по умолчанию: up- Свечение
gradient· по умолчанию: включено- Изометрия
isometric· по умолчанию: выключено- Акцент
accent· по умолчанию: цвет темы
Ещё в разделе «Интерфейс»
Частые вопросы
- Как установить компонент «Мини-панель» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Мини-панель»?
- Никаких npm-пакетов, кроме React и Tailwind CSS.
- Что можно поменять в компоненте «Мини-панель»?
- Можно менять: заголовок метрики, значение value и пилюлю trend под свои данные; направление тренда через trendTone (up/down) — красит пилюлю; точки мини-графика через spark под реальный ряд данных. Сохранить как есть: локальную палитру --vibeui-dashboard-anim-001-* — не подменяйте её токенами вашей темы; барабанную анимацию цифр числа (каждая цифра — колонка со стопкой 0–9, едущая вверх до нужного значения) — не заменяйте статичным текстом; дорисовку мини-спарклайна слева направо и точку на конце линии.
- Компонент «Мини-панель» бесплатный?
- Превью открыто всем, исходник доступен по подписке PRO.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/dashboard-anim-001.jsonКоманде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Компонент самодостаточен: один файл, ноль зависимостей, палитра в локальных --vibeui-dashboard-anim-001-*. Тему берёт из окружения через light-dark() плюс строку для класса .dark, поэтому в тёмном проекте не остаётся светлым. Число — не просто текст: каждая цифра лежит в своей колонке со стопкой 0–9 и едет вверх, пока не встанет на нужном значении; остальные символы строки (пробел, $, %, запятая) просто проявляются в том же ритме. Мини-спарклайн справа дорисовывается слева направо через stroke-dashoffset, заливка под линией и точка на конце проявляются следом. Цикл бесконечный: досчитав и дорисовав график, панель на мгновение гаснет и считает заново. Настоящее значение продублировано скрытой строкой для скринридера, барабан и график декоративны. Всё гаснет при prefers-reduced-motion.
Теги
- dashboard
- metric
- counter
- sparkline
- chart
- animated
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…