VibeUI

Inputs

Decimal Score

A numeric score with tenths: stars give five notches, while reviews live in the difference between 8.4 and 8.6.

  • number
  • rating
  • score
  • review

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/number-007?lang=en

/ 10отлично

Шаг 0.1 — стрелки вверх и вниз меняют оценку на одну десятую.

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "number-007" (Decimal Score) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/number-007.json

Registry item: https://vibeui.ru/r/number-007.json
Installs to: components/vibeui/number-007.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
A numeric score with tenths: stars give five notches, while reviews live in the difference between 8.4 and 8.6.

A numeric score from zero to ten with a tenth-sized step, a colour driven by the value and a ten-notch meter. Zero dependencies, one file.

## 3. How to use it
import { Number007 } from "@/components/vibeui/number-007"

<Number007 label="Your score" defaultValue={8.4} max={10} />

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-number-007-* palette — do not swap it for your theme tokens
- its own light surface: the field gets shown over any background
- the 0.1 step: it is the reason this component exists, whole notches are already covered by stars
- rounding to tenths on input: without it 8.400000000000001 surfaces
- the tone via data-tone and a single accent variable: otherwise the colour has to be patched in five rules
- aria-live on the verdict: the word changes as you type and must be announced
- the fixed field width: "10" and "8.4" must not shift the "/ 10" caption

## 6. You may change
- label — the field caption
- defaultValue — the starting score
- max — the top of the scale, a five-point one reads fine too
- the thresholds and words inside the verdictOf helper
- the accent through the accent prop

## 7. Rules
- accent overrides the automatic tone: set it only when the value-driven colour is unwanted.
- The meter has exactly max notches — beyond twelve they stop being distinguishable.
- The half-notch rule deliberately fills 8.5 as the ninth: otherwise the meter lags behind the number.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

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

Компонент самодостаточен: один файл, ноль зависимостей, палитра в локальных переменных --vibeui-number-007-*. Клиентский: оценка в состоянии. Шаг 0.1 и приведение к десятым сделаны при вводе, поэтому стрелки клавиатуры дают ровно одну десятую. Тон берётся из значения через data-tone на корне и переопределение --vibeui-number-007-accent, поэтому цвет числа, обводки, вердикта и шкалы меняется одной переменной. Шкала из десяти делений закрашивается по правилу «половина деления».

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

"use client"

import { useId, useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Number007Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children" | "defaultValue" | "onChange"
> & {
  label?: string
  defaultValue?: number
  max?: number
  accent?: string
}

// Идея компонента: оценка числом, а не звёздами. Звёзды дают пять делений,
// а рецензии живут в десятых: 8.4 и 8.6 — разные оценки. Поэтому ввод
// числовой, с шагом 0.1, а рядом — шкала из десяти делений: цифру уточняют
// клавиатурой, а порядок величины считывают глазом. Цвет берётся от значения,
// поэтому «слабо» и «отлично» различимы до чтения подписи.
const STYLES = `
:where([data-vibeui-block="number-007"]){
--vibeui-number-007-surface:oklch(1 0 0);
--vibeui-number-007-shell:oklch(0.9 0.006 265);
--vibeui-number-007-fg:oklch(0.23 0.014 265);
--vibeui-number-007-muted:oklch(0.55 0.014 265);
--vibeui-number-007-border:oklch(0.88 0.008 265);
--vibeui-number-007-track:oklch(0.93 0.006 265);
--vibeui-number-007-low:oklch(0.58 0.19 25);
--vibeui-number-007-mid:oklch(0.72 0.15 75);
--vibeui-number-007-high:oklch(0.6 0.16 150);
--vibeui-number-007-accent:var(--vibeui-number-007-high);
--vibeui-number-007-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Своя светлая подложка: поле показывают поверх любого фона. */
[data-vibeui-block="number-007"]{
display:flex;flex-direction:column;gap:0.625rem;
width:100%;max-width:18rem;box-sizing:border-box;padding:0.875rem;
background:var(--vibeui-number-007-surface);
border:1px solid var(--vibeui-number-007-shell);border-radius:0.875rem;
font-family:var(--vibeui-number-007-font);color:var(--vibeui-number-007-fg);
}
/* Цвет от значения: «слабо» и «отлично» видны до чтения подписи. */
[data-vibeui-block="number-007"][data-tone="low"]{--vibeui-number-007-accent:var(--vibeui-number-007-low)}
[data-vibeui-block="number-007"][data-tone="mid"]{--vibeui-number-007-accent:var(--vibeui-number-007-mid)}
[data-vibeui-block="number-007"][data-tone="high"]{--vibeui-number-007-accent:var(--vibeui-number-007-high)}
[data-vibeui-block="number-007"] label{font-size:0.8125rem;font-weight:650}
[data-vibeui-block="number-007"] [data-part="row"]{
display:flex;align-items:baseline;gap:0.375rem;
padding:0.25rem 0.75rem;box-sizing:border-box;
border:1px solid var(--vibeui-number-007-border);border-radius:0.75rem;
}
[data-vibeui-block="number-007"] [data-part="row"]:focus-within{
border-color:var(--vibeui-number-007-accent);
box-shadow:0 0 0 2px color-mix(in oklch,var(--vibeui-number-007-accent) 22%,transparent);
}
/* Ширина по содержимому: «8.4» и «10» не должны прыгать относительно «/ 10». */
[data-vibeui-block="number-007"] input{
flex:0 1 4.5rem;width:4.5rem;min-width:0;
appearance:none;border:0;background:none;outline:none;
height:2.75rem;color:var(--vibeui-number-007-accent);
font:inherit;font-size:2rem;font-weight:750;letter-spacing:-0.02em;
font-variant-numeric:tabular-nums;
}
[data-vibeui-block="number-007"] input::-webkit-outer-spin-button,
[data-vibeui-block="number-007"] input::-webkit-inner-spin-button{appearance:none;margin:0}
[data-vibeui-block="number-007"] [data-part="scale"]{
flex:none;font-size:1rem;font-weight:650;color:var(--vibeui-number-007-muted);
}
[data-vibeui-block="number-007"] [data-part="verdict"]{
margin-left:auto;flex:none;font-size:0.75rem;font-weight:650;
color:var(--vibeui-number-007-accent);
}
/* Десять делений: порядок величины считывают глазом, а не цифрой. */
[data-vibeui-block="number-007"] [data-part="meter"]{display:flex;gap:0.1875rem}
[data-vibeui-block="number-007"] [data-part="tick"]{
flex:1 1 0;height:0.375rem;border-radius:9999px;background:var(--vibeui-number-007-track);
transition:background-color .16s ease;
}
[data-vibeui-block="number-007"] [data-part="tick"][data-on="true"]{background:var(--vibeui-number-007-accent)}
[data-vibeui-block="number-007"] [data-part="hint"]{
margin:0;font-size:0.75rem;line-height:1.4;color:var(--vibeui-number-007-muted);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="number-007"] *{animation:none!important;transition:none!important}}
`

function verdictOf(value: number) {
  if (value < 5) return { tone: "low", text: "слабо" }
  if (value < 7.5) return { tone: "mid", text: "средне" }
  return { tone: "high", text: "отлично" }
}

/**
 * Числовая оценка с десятыми долями и шкалой из десяти делений.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Number007({
  label = "Ваша оценка",
  defaultValue = 8.4,
  max = 10,
  accent,
  className,
  style,
  ...props
}: Number007Props) {
  const id = useId()
  const [value, setValue] = useState(defaultValue)
  const verdict = verdictOf(value)
  const ticks = Array.from({ length: max }, (_, index) => index + 1)

  const palette = {
    ...(accent ? { "--vibeui-number-007-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-number-007" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="number-007"
        data-tone={verdict.tone}
        className={className}
        style={palette}
      >
        <label htmlFor={id}>{label}</label>
        <div data-part="row">
          <input
            id={id}
            type="number"
            inputMode="decimal"
            min={0}
            max={max}
            step={0.1}
            value={value}
            aria-describedby={`${id}-hint`}
            onChange={(event) => {
              const next = Number(event.target.value)
              if (!Number.isFinite(next)) return
              setValue(Math.min(max, Math.max(0, Math.round(next * 10) / 10)))
            }}
          />
          <span data-part="scale">/ {max}</span>
          <span data-part="verdict" aria-live="polite">
            {verdict.text}
          </span>
        </div>
        <div data-part="meter" aria-hidden="true">
          {ticks.map((tick) => (
            <span key={tick} data-part="tick" data-on={value >= tick - 0.5} />
          ))}
        </div>
        <p id={`${id}-hint`} data-part="hint">
          Шаг 0.1 — стрелки вверх и вниз меняют оценку на одну десятую.
        </p>
      </div>
    </>
  )
}