Numbers and data

Ranking

A leaderboard: the place, the name, the value with its interval, the change, a bar in proportion.

openvibe-shared/kitJSON

Build it

kit.rank({ base: 900, fmt: 'int', items: [{ name: 'claude-opus-5-5', value: 1088, interval: 14, delta: 2 }, { name: 'gemini-3-pro', value: 1051, interval: 18, delta: -1 }, { name: 'gpt-5', value: 1032, interval: 16 }, { name: 'deepseek-v4', value: 998, interval: 21, delta: 1 }] })

Props

fmt
string?
base
number?
unit
string?
items
list?
label
string?
start
number?

Anatomy

  • rankA leaderboard: the place, the name, the value with its interval, the change, a bar in proportion.

Behaviour and access

Keyboard
Standard focus order
Outside tap
Leaves it open
Scroll
The page still scrolls
Reduced motion
Remove movement; keep the state change.
Name
Ranking
Target
At least 44 × 44 px on touch
Focus
Visible keyboard focus; follow reading order

States

  • default

Tokens

  • color.accent.base
  • color.text.primary

Android · Jetpack Compose

Material 3 Ranking

Use Ranking in Jetpack Compose with the shared tokens.

iOS · SwiftUI

Use Ranking in SwiftUI with the shared tokens.

Markup

Default

<ol class="ovk-rank" aria-label="Ranking" start="1"><li class="ovk-rank-row is-top"><span class="ovk-rank-n" aria-hidden="true">1</span><span class="ovk-rank-main"><span class="ovk-rank-name"><strong>claude-opus-5-5</strong></span></span><span class="ovk-rank-val"><b>1,088</b><small>± 14</small></span><span class="ovk-rank-delta is-up" aria-label="up 2"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m5.4 15.3 6.6-6.6 6.6 6.6"/></svg>2</span><span class="ovk-rank-bar" style="--v:1.000" aria-hidden="true"></span></li><li class="ovk-rank-row is-top"><span class="ovk-rank-n" aria-hidden="true">2</span><span class="ovk-rank-main"><span class="ovk-rank-name"><strong>gemini-3-pro</strong></span></span><span class="ovk-rank-val"><b>1,051</b><small>± 18</small></span><span class="ovk-rank-delta is-down" aria-label="down 1"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m6.6 9.9 6.6 6.6 6.6 -6.6"/></svg>1</span><span class="ovk-rank-bar" style="--v:0.803" aria-hidden="true"></span></li><li class="ovk-rank-row is-top"><span class="ovk-rank-n" aria-hidden="true">3</span><span class="ovk-rank-main"><span class="ovk-rank-name"><strong>gpt-5</strong></span></span><span class="ovk-rank-val"><b>1,032</b><small>± 16</small></span><span class="ovk-rank-bar" style="--v:0.702" aria-hidden="true"></span></li><li class="ovk-rank-row"><span class="ovk-rank-n" aria-hidden="true">4</span><span class="ovk-rank-main"><span class="ovk-rank-name"><strong>deepseek-v4</strong></span></span><span class="ovk-rank-val"><b>998</b><small>± 21</small></span><span class="ovk-rank-delta is-up" aria-label="up 1"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m5.4 15.3 6.6-6.6 6.6 6.6"/></svg>1</span><span class="ovk-rank-bar" style="--v:0.521" aria-hidden="true"></span></li></ol>