Inputs
NPS Scale
Шкала NPS от нуля до десяти с зонами критиков, нейтралов и сторонников — раскрашенными до ответа, а не после.
- rating
- nps
- survey
- css-only
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/rating-008
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «rating-008» (NPS Scale) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/rating-008.json
Registry item: https://vibeui.ru/r/rating-008.json
Ставится в: components/vibeui/rating-008.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Шкала NPS от нуля до десяти с зонами критиков, нейтралов и сторонников — раскрашенными до ответа, а не после.
Опрос NPS: одиннадцать делений от нуля до десяти, три цветовые зоны и ответная реплика без JS. Серверный, ноль зависимостей, один файл.
## 3. Как использовать
import { Rating008 } from "@/components/vibeui/rating-008"
<Rating008 legend="Насколько вероятно, что вы порекомендуете нас коллеге?" name="nps" />
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-rating-008-* и не подменять её токенами вашей темы
- собственную светлую подложку: опрос показывают поверх любого фона
- начало шкалы с нуля: NPS с единицы — уже не NPS, и метрика перестаёт сравниваться
- границы зон 0–6, 7–8, 9–10: их сдвиг меняет сам показатель, а не оформление
- раскраску зон до ответа: иначе семёрку ставят в значении «хорошо»
- подписи-якоря под краями шкалы: без них ноль и десять читаются наоборот
- clear:both у шкалы: legend с float:left иначе заставляет деления обтекать себя
## 6. Можно менять
- legend — формулировку вопроса
- name — имя группы радиокнопок
- lowAnchor и highAnchor — подписи под краями
- тексты реплик для трёх зон
- акцент через проп accent
## 7. Правила
- Одиннадцать делений на узком экране становятся тесными: ниже 20rem лучше перенести шкалу на две строки.
- Ответная реплика меняется правилами :has — при смене числа делений правила надо переписать.
- Сам индекс NPS тут не считается: это ввод одного ответа, агрегируйте его на сервере.
- Не выносите CSS-переменные в globals.css: компонент обязан остаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/rating-008.jsonhttps://vibeui.ru/r/rating-008.jsonКомпонент самодостаточен: один файл, ноль зависимостей, палитра в локальных переменных --vibeui-rating-008-*. Серверный: всё держится на радиокнопках и :has(). Шкала начинается с нуля и делится на три зоны — 0–6, 7–8, 9–10; цвет зоны проставлен через data-zone сразу, потому что человек должен видеть, что семёрка здесь не «хорошо». Ответная реплика переключается правилами :has по значению отмеченной кнопки: одиннадцать селекторов сгруппированы в три набора.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Rating008Props = Omit<
ComponentPropsWithoutRef<"fieldset">,
"children" | "defaultValue"
> & {
legend?: string
name?: string
lowAnchor?: string
highAnchor?: string
accent?: string
}
// Идея компонента: NPS ровно такой, как его считают. Шкала обязана начинаться
// с нуля, а не с единицы, и делиться на три зоны: 0–6 критики, 7–8 нейтралы,
// 9–10 сторонники. Зоны раскрашены сразу, а не после ответа: человек должен
// видеть, что «семёрка» здесь не «хорошо», иначе метрика собирает не то, что
// считает. Всё на радиокнопках и :has(), поэтому клавиатура, отправка формы и
// смена ответной реплики работают без JS, а компонент остаётся серверным.
const STYLES = `
:where([data-vibeui-block="rating-008"]){
--vibeui-rating-008-surface:oklch(1 0 0);
--vibeui-rating-008-shell:oklch(0.9 0.006 265);
--vibeui-rating-008-fg:oklch(0.23 0.014 265);
--vibeui-rating-008-muted:oklch(0.55 0.014 265);
--vibeui-rating-008-border:oklch(0.9 0.006 265);
--vibeui-rating-008-low:oklch(0.58 0.18 25);
--vibeui-rating-008-mid:oklch(0.7 0.14 75);
--vibeui-rating-008-high:oklch(0.56 0.15 155);
--vibeui-rating-008-accent:oklch(0.55 0.17 265);
--vibeui-rating-008-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Своя светлая подложка: опрос показывают поверх любого фона. */
[data-vibeui-block="rating-008"]{
display:flex;flex-direction:column;gap:0.5rem;
width:100%;max-width:24rem;box-sizing:border-box;margin:0;padding:0.875rem;
background:var(--vibeui-rating-008-surface);
border:1px solid var(--vibeui-rating-008-shell);border-radius:0.875rem;
font-family:var(--vibeui-rating-008-font);color:var(--vibeui-rating-008-fg);
}
/* legend во float даёт обтекание: clear возвращает нормальный поток. */
[data-vibeui-block="rating-008"] legend{
float:left;width:100%;padding:0;margin-bottom:0.5rem;
font-size:0.875rem;font-weight:650;line-height:1.35;
}
[data-vibeui-block="rating-008"] [data-part="scale"]{clear:both;display:flex;gap:0.1875rem}
[data-vibeui-block="rating-008"] input{position:absolute;opacity:0;pointer-events:none}
[data-vibeui-block="rating-008"] label{
flex:1 1 0;min-width:0;display:grid;place-items:center;cursor:pointer;
height:2.25rem;border-radius:0.375rem;
border:1px solid var(--vibeui-rating-008-border);
font-size:0.75rem;font-weight:700;font-variant-numeric:tabular-nums;
transition:background-color .12s ease,color .12s ease,border-color .12s ease;
}
/* Зоны раскрашены до ответа: иначе «семёрку» ставят как «хорошо». */
[data-vibeui-block="rating-008"] label[data-zone="low"]{color:var(--vibeui-rating-008-low)}
[data-vibeui-block="rating-008"] label[data-zone="mid"]{color:var(--vibeui-rating-008-mid)}
[data-vibeui-block="rating-008"] label[data-zone="high"]{color:var(--vibeui-rating-008-high)}
[data-vibeui-block="rating-008"] label:hover{border-color:currentColor}
[data-vibeui-block="rating-008"] label:has(input:checked){color:oklch(1 0 0);border-color:transparent}
[data-vibeui-block="rating-008"] label[data-zone="low"]:has(input:checked){background:var(--vibeui-rating-008-low)}
[data-vibeui-block="rating-008"] label[data-zone="mid"]:has(input:checked){background:var(--vibeui-rating-008-mid)}
[data-vibeui-block="rating-008"] label[data-zone="high"]:has(input:checked){background:var(--vibeui-rating-008-high)}
[data-vibeui-block="rating-008"] label:has(input:focus-visible){outline:2px solid var(--vibeui-rating-008-accent);outline-offset:2px}
[data-vibeui-block="rating-008"] [data-part="anchors"]{
display:flex;justify-content:space-between;gap:1rem;margin:0;
font-size:0.6875rem;color:var(--vibeui-rating-008-muted);
}
/* Ответная реплика без JS: видна та, чья зона отмечена. */
[data-vibeui-block="rating-008"] [data-part="replies"]{min-height:1.125rem}
[data-vibeui-block="rating-008"] [data-part="reply"]{display:none;margin:0;font-size:0.75rem;line-height:1.4;font-weight:600}
[data-vibeui-block="rating-008"] [data-part="reply"][data-zone="low"]{color:var(--vibeui-rating-008-low)}
[data-vibeui-block="rating-008"] [data-part="reply"][data-zone="mid"]{color:var(--vibeui-rating-008-mid)}
[data-vibeui-block="rating-008"] [data-part="reply"][data-zone="high"]{color:var(--vibeui-rating-008-high)}
[data-vibeui-block="rating-008"]:has(input[value="0"]:checked) [data-part="reply"][data-zone="low"],
[data-vibeui-block="rating-008"]:has(input[value="1"]:checked) [data-part="reply"][data-zone="low"],
[data-vibeui-block="rating-008"]:has(input[value="2"]:checked) [data-part="reply"][data-zone="low"],
[data-vibeui-block="rating-008"]:has(input[value="3"]:checked) [data-part="reply"][data-zone="low"],
[data-vibeui-block="rating-008"]:has(input[value="4"]:checked) [data-part="reply"][data-zone="low"],
[data-vibeui-block="rating-008"]:has(input[value="5"]:checked) [data-part="reply"][data-zone="low"],
[data-vibeui-block="rating-008"]:has(input[value="6"]:checked) [data-part="reply"][data-zone="low"],
[data-vibeui-block="rating-008"]:has(input[value="7"]:checked) [data-part="reply"][data-zone="mid"],
[data-vibeui-block="rating-008"]:has(input[value="8"]:checked) [data-part="reply"][data-zone="mid"],
[data-vibeui-block="rating-008"]:has(input[value="9"]:checked) [data-part="reply"][data-zone="high"],
[data-vibeui-block="rating-008"]:has(input[value="10"]:checked) [data-part="reply"][data-zone="high"]{display:block}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="rating-008"] *{animation:none!important;transition:none!important}}
`
const REPLIES = [
{ zone: "low", text: "Жаль. Расскажете, что испортило впечатление?" },
{ zone: "mid", text: "Спасибо. Чего не хватило до девятки?" },
{ zone: "high", text: "Спасибо! Поделитесь ссылкой с коллегами." },
]
function zoneOf(score: number) {
if (score <= 6) return "low"
if (score <= 8) return "mid"
return "high"
}
/**
* Шкала NPS от нуля до десяти с зонами критиков, нейтралов и сторонников.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Rating008({
legend = "Насколько вероятно, что вы порекомендуете нас коллеге?",
name = "vibeui-rating-008",
lowAnchor = "0 — точно нет",
highAnchor = "10 — обязательно",
accent,
className,
style,
...props
}: Rating008Props) {
const scores = Array.from({ length: 11 }, (_, index) => index)
const palette = {
...(accent ? { "--vibeui-rating-008-accent": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-rating-008" precedence="medium">
{STYLES}
</style>
<fieldset
{...props}
data-vibeui-block="rating-008"
className={className}
style={palette}
>
<legend>{legend}</legend>
<div data-part="scale">
{scores.map((score) => (
<label key={score} data-zone={zoneOf(score)}>
<input type="radio" name={name} value={score} />
{score}
</label>
))}
</div>
<p data-part="anchors">
<span>{lowAnchor}</span>
<span>{highAnchor}</span>
</p>
<div data-part="replies" aria-live="polite">
{REPLIES.map((reply) => (
<p key={reply.zone} data-part="reply" data-zone={reply.zone}>
{reply.text}
</p>
))}
</div>
</fieldset>
</>
)
}