Badge

Trend Badge

Изменение показателя со стрелкой: что считать ростом, решает вызывающий код — у оттока рост это плохо.

badge
trend
metrics
dashboard

Превью

1440pxHost theme

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

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

размести это в шапке: https://vibeui.ru/c/badge-007

+12.4%за неделю

Изменение

Хорошо, когда

Период

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

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

# Установка и размещение «badge-007» (Trend Badge) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/badge-007.json

Registry item: https://vibeui.ru/r/badge-007.json
Ставится в: components/vibeui/badge-007.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Изменение показателя со стрелкой: что считать ростом, решает вызывающий код — у оттока рост это плохо.

Плашка изменения показателя: стрелка, знак, процент и период. Хорошее направление задаётся снаружи, поэтому падение оттока красится зелёным. Ноль зависимостей, один файл, клиентского JS нет.

## 3. Как использовать
import { Badge007 } from "@/components/vibeui/badge-007"

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-badge-007-* и не подменять её токенами вашей темы
- проп goodDirection: рост выручки и рост оттока — разные новости, компонент не решает это сам
- знак и стрелку рядом с цветом — в чёрно-белом виде цвет исчезает
- табличные цифры: в столбце показателей значения обязаны стоять ровно
- отдельное состояние для нуля: стрелка вверх при нулевом изменении врёт
- период мелким шрифтом рядом — «+12%» без периода бессмысленно

## 6. Можно менять
- value и unit
- goodDirection — up или down
- period — за какой срок
- цвета хорошего и плохого под свою палитру

## 7. Правила
- Значение приходит готовым: компонент ничего не считает и не округляет.
- Для процентных пунктов замените unit на «п. п.» — путать их с процентами нельзя.
- Цвет не заменяет подпись: рядом с плашкой должно стоять название показателя.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

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

npx shadcn@latest add https://vibeui.ru/r/badge-007.json

https://vibeui.ru/r/badge-007.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-badge-007-*. Серверный: хуков нет. Направление считается из знака значения, а окраска — из совпадения направления с пропом goodDirection. Стрелка нарисована двумя бордюрами и поворачивается трансформацией; при нулевом изменении превращается в горизонтальную черту. Цифры табличные, знак минус — типографский.

Исходник компонента

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Badge007Props = Omit<
  ComponentPropsWithoutRef<"span">,
  "children"
> & {
  value?: number
  /** Что считаем ростом: у расходов и оттока рост — это плохо. */
  goodDirection?: "up" | "down"
  unit?: string
  period?: string
}

// Идея компонента: изменение показателя со стрелкой. Хорошее направление
// задаётся снаружи: рост выручки — зелёный, рост оттока — красный, и
// компонент не имеет права решать это за вас. Знак и стрелка дублируют цвет,
// поэтому значение читается и в чёрно-белом виде.
const STYLES = `
:where([data-vibeui-block="badge-007"]){
--vibeui-badge-007-bg:oklch(0.96 0.004 265);
--vibeui-badge-007-fg:oklch(0.32 0.014 265);
--vibeui-badge-007-muted:oklch(0.55 0.014 265);
--vibeui-badge-007-good:oklch(0.55 0.15 152);
--vibeui-badge-007-bad:oklch(0.55 0.18 25);
--vibeui-badge-007-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="badge-007"]{
display:inline-flex;align-items:center;gap:0.3125rem;
height:1.5rem;padding:0 0.5625rem;
border-radius:0.4375rem;
background:var(--vibeui-badge-007-bg);color:var(--vibeui-badge-007-fg);
font-family:var(--vibeui-badge-007-font);font-size:0.75rem;font-weight:600;
font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;vertical-align:middle;
}
[data-vibeui-block="badge-007"][data-mood="good"]{color:var(--vibeui-badge-007-good);background:color-mix(in oklab,var(--vibeui-badge-007-good) 12%,oklch(1 0 0))}
[data-vibeui-block="badge-007"][data-mood="bad"]{color:var(--vibeui-badge-007-bad);background:color-mix(in oklab,var(--vibeui-badge-007-bad) 12%,oklch(1 0 0))}
[data-vibeui-block="badge-007"][data-mood="flat"]{color:var(--vibeui-badge-007-muted)}
/* Стрелка из двух бордюров: направление видно и без цвета. */
[data-vibeui-block="badge-007"] [data-part="arrow"]{
flex:none;width:0.4375rem;height:0.4375rem;
border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
}
[data-vibeui-block="badge-007"][data-direction="up"] [data-part="arrow"]{transform:rotate(-45deg) translate(0.0625rem,0.0625rem)}
[data-vibeui-block="badge-007"][data-direction="down"] [data-part="arrow"]{transform:rotate(135deg) translate(0.0625rem,0.0625rem)}
[data-vibeui-block="badge-007"][data-direction="flat"] [data-part="arrow"]{
border-top:0;border-right:0;height:0;width:0.5rem;
border-bottom:1.5px solid currentColor;
}
[data-vibeui-block="badge-007"] [data-part="period"]{font-weight:500;color:var(--vibeui-badge-007-muted)}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="badge-007"] *{animation:none!important;transition:none!important}}
`

/**
 * Изменение показателя: стрелка, знак и цвет по заданному направлению.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Badge007({
  value = 12.4,
  goodDirection = "up",
  unit = "%",
  period = "за неделю",
  className,
  style,
  ...props
}: Badge007Props) {
  const direction = value > 0 ? "up" : value < 0 ? "down" : "flat"
  const mood =
    direction === "flat" ? "flat" : direction === goodDirection ? "good" : "bad"
  const sign = value > 0 ? "+" : value < 0 ? "−" : ""
  const text = `${sign}${Math.abs(value)}${unit}`

  return (
    <>
      <style href="vibeui-badge-007" precedence="medium">
        {STYLES}
      </style>
      <span
        {...props}
        data-vibeui-block="badge-007"
        data-direction={direction}
        data-mood={mood}
        className={className}
        style={style as CSSProperties}
      >
        <span data-part="arrow" aria-hidden="true" />
        {text}
        {period ? <span data-part="period">{period}</span> : null}
      </span>
    </>
  )
}