Skip to Content
We're rolling out the first batch of Game UIs right now, and it might take a few days to fully wrap up. If you're already testing the UI comps, we'd love to hear any feedback you've got! 🙏
UI DocsVIGORSegmented

Segmented Bar

Overwatch-style health bar done using UI Toolkit’s Vector API.

import { h } from "preact" import { useRandomHealthValues } from "@/comps/vigor/utils" import { SegmentedBar } from "@/comps/vigor/segmented" import { LerpNum } from "@/comps/varia/lerpnum" import { Color } from "UnityEngine" export const SegmentedDemo = () => { // Using `useRandomHealthValues()` to mimic random value changes for fast testing const [health, maxHealth] = useRandomHealthValues(50, 500, 1000, 3000) return <div class="p-10 bg-teal-500/10 rounded flex-col justify-center items-center"> <div class="text-white font-bold text-4xl mb-4 flex-row"> <LerpNum value={health} /> <div class="px-2">{`/`}</div> <LerpNum value={maxHealth} /> </div> <SegmentedBar value={health} maxValue={maxHealth} borderWidth={2} borderColor={Color.white} /> </div> }

Multi-Value Segmented Bar

Allows you to display multiple values in a single segmented bar, useful for showing different stats like health, shield, and armor.

import { h } from "preact" import { getSortedRandomIntegers, useRandomHealthValues } from "@/comps/vigor/utils" import { MultiValueSegmentedBar, SegmentedBar } from "@/comps/vigor/segmented" import { LerpNum } from "@/comps/varia/lerpnum" import { Color } from "UnityEngine" const colors = [ new Color(0.85, 0.25, 0.25), // HP - Crimson Red (#D94141) new Color(0.27, 0.51, 0.71), // Armor - Steel Blue (#4682B4) new Color(0.2, 0.84, 0.76) // Shield - Electric Teal (#33D6C1) ] export const MultiValueSegmentedDemo = () => { // Using `useRandomHealthValues()` to mimic random value changes for fast testing const [health, maxHealth] = useRandomHealthValues(250, 500, 1000, 3000) const values = [...getSortedRandomIntegers(3, maxHealth, 150)] return <div class="p-10 bg-teal-500/10 rounded flex-col justify-center items-center"> <div class="text-white font-bold text-2xl mb-4 flex-row"> <LerpNum value={values[0]} style={{ color: colors[0] }} /> <div class="px-2">,</div> <LerpNum value={values[1]} style={{ color: colors[1] }} /> <div class="px-2">,</div> <LerpNum value={values[2]} style={{ color: colors[2] }} /> <div class="px-2">{`/`}</div> <LerpNum value={maxHealth} /> </div> <MultiValueSegmentedBar values={values} maxValue={maxHealth} colors={colors} borderWidth={2} borderColor={Color.white} /> </div> }