Display
Vertical Stat Rules
Строка показателей с вертикальными разделителями: линия берёт высоту у соседей, а не задаёт её, поэтому строка не растёт от самой линии.
- separator
- vertical
- stats
- row
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/separator-003
128компонентов
24категории
0зависимостей
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «separator-003» (Vertical Stat Rules) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/separator-003.json
Registry item: https://vibeui.ru/r/separator-003.json
Ставится в: components/vibeui/separator-003.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Строка показателей с вертикальными разделителями: линия берёт высоту у соседей, а не задаёт её, поэтому строка не растёт от самой линии.
Строка показателей с вертикальными разделителями: линия тянется по высоте соседей или по строке значения. Ноль зависимостей, один файл, клиентского JS нет.
## 3. Как использовать
import { Separator003 } from "@/components/vibeui/separator-003"
<Separator003
items={[{ value: "128", caption: "компонентов" }, { value: "24", caption: "категории" }]}
gap={20}
dividerHeight="full"
/>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-separator-003-* и не подменять её токенами вашей темы
- align-items:stretch на ряду: без него линия схлопывается в ноль высоты
- отсутствие фиксированной высоты у линии — заданная вручную, она разойдётся с соседями
- role=separator с вертикальной ориентацией: иначе граница между цифрами не слышна
- моноширинные цифры значений: обычные дают разную ширину и колонка дёргается
- собственную светлую подложку: цифры и подписи тёмные и на тёмном фоне пропадают
## 6. Можно менять
- промежуток между блоками через gap в пикселях
- высоту линии через dividerHeight: text или full
- состав показателей через items
- цвет линии через переменную --vibeui-separator-003-line
## 7. Правила
- Ряд не переносится: четыре и больше показателей на телефоне уедут за край.
- Промежуток задан в пикселях, а не в rem: он не масштабируется с кеглем.
- Подписи помечены nowrap — длинное слово растянет строку, а не перенесётся.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/separator-003.jsonhttps://vibeui.ru/r/separator-003.jsonСерверный компонент, хуков нет. Ряд выровнен align-items:stretch, из-за чего разделитель шириной в один пиксель сам вытягивается до высоты самого высокого блока — задавать ему height вручную не нужно и вредно. Режим text ограничивает линию высотой строки значения: так делают в шапках, где полная линия выглядит как граница таблицы. Каждый разделитель помечен role=separator с aria-orientation=vertical, поэтому граница между показателями слышна. Промежуток вынесен в проп gap и подставляется переменной в пикселях. Подложка светлая: цифры и подписи тёмные.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import { Fragment } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Separator003Item = { value: string; caption: string }
export type Separator003Props = Omit<
ComponentPropsWithoutRef<"div">,
"children"
> & {
items?: Separator003Item[]
gap?: number
dividerHeight?: "text" | "full"
}
// Идея компонента: вертикальные разделители между блоками одной строки.
// Линия не задаёт высоту строки, а берёт её у соседей: при dividerHeight
// "full" ряд растянут align-items:stretch, и линия сама вытягивается до
// высоты самого высокого блока. Вариант "text" ограничивает её строкой
// значения — так делают в шапках, где полная линия выглядит как граница
// таблицы. Разделители помечены role="separator" с вертикальной ориентацией.
const STYLES = `
:where([data-vibeui-block="separator-003"]){
--vibeui-separator-003-gap:20px;
--vibeui-separator-003-line:oklch(0.88 0.006 265);
--vibeui-separator-003-surface:oklch(1 0 0);
--vibeui-separator-003-border:oklch(0.91 0.006 265);
--vibeui-separator-003-fg:oklch(0.24 0.014 265);
--vibeui-separator-003-muted:oklch(0.55 0.014 265);
--vibeui-separator-003-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Своя светлая подложка: цифры и подписи тёмные. */
[data-vibeui-block="separator-003"]{
display:inline-flex;align-items:stretch;
gap:var(--vibeui-separator-003-gap);
box-sizing:border-box;padding:0.875rem 1.125rem;
background:var(--vibeui-separator-003-surface);
border:1px solid var(--vibeui-separator-003-border);border-radius:0.875rem;
font-family:var(--vibeui-separator-003-font);color:var(--vibeui-separator-003-fg);
}
[data-vibeui-block="separator-003"] [data-part="cell"]{
display:flex;flex-direction:column;gap:0.125rem;min-width:0;
}
[data-vibeui-block="separator-003"] [data-part="value"]{
font-size:1.125rem;font-weight:700;line-height:1.2;
font-variant-numeric:tabular-nums;
}
[data-vibeui-block="separator-003"] [data-part="caption"]{
font-size:0.75rem;color:var(--vibeui-separator-003-muted);white-space:nowrap;
}
/* Линия берёт высоту у соседей, а не задаёт её: строка не растёт от линии. */
[data-vibeui-block="separator-003"] [data-part="rule"]{
flex:none;width:1px;background:var(--vibeui-separator-003-line);
}
[data-vibeui-block="separator-003"][data-height="text"] [data-part="rule"]{
align-self:flex-start;height:1.375rem;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="separator-003"] *{animation:none!important;transition:none!important}}
`
const DEFAULT_ITEMS: Separator003Item[] = [
{ value: "128", caption: "компонентов" },
{ value: "24", caption: "категории" },
{ value: "0", caption: "зависимостей" },
]
/**
* Строка показателей с вертикальными разделителями между блоками.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Separator003({
items = DEFAULT_ITEMS,
gap = 20,
dividerHeight = "full",
className,
style,
...props
}: Separator003Props) {
const palette = {
"--vibeui-separator-003-gap": `${gap}px`,
...style,
} as CSSProperties
return (
<>
<style href="vibeui-separator-003" precedence="medium">
{STYLES}
</style>
<div
{...props}
data-vibeui-block="separator-003"
data-height={dividerHeight}
className={className}
style={palette}
>
{items.map((item, index) => (
<Fragment key={item.caption}>
{index > 0 ? (
<span
data-part="rule"
role="separator"
aria-orientation="vertical"
/>
) : null}
<div data-part="cell">
<span data-part="value">{item.value}</span>
<span data-part="caption">{item.caption}</span>
</div>
</Fragment>
))}
</div>
</>
)
}