FeedbackAvailable

Game Stat

Score-board chip for points or time: icon, label and a game-number value that can pop when it changes.

01:05

Points220

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/game-stat.json

Usage

Import the component into your project and keep the source code under your control.

tsx

"use client";
import { useState } from "react";
import { TimerIcon, TrophyIcon } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";
import { GameStat } from "@/components/ui/game-stat";
export default function Demo() {
  const [points, setPoints] = useState(220);
  return (
    <div className="flex flex-wrap items-center gap-3">
      <GameStat icon={<TimerIcon weight="bold" />} label="Time" hideLabel value="01:05" />
      <GameStat icon={<TrophyIcon weight="bold" />} label="Points" tone="yellow" bump value={points} />
      <Button variant="outline" onClick={() => setPoints(points + 120)}>+120 points</Button>
    </div>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
label / value / icon	string / ReactNode / ReactNode	Required	The label stays available even when hidden; the icon is decorative.
tone / hideLabel / bump	card \| mint \| sky \| purple \| yellow / boolean / boolean	card / false / false	Pastel tones with ink text; bump pops the value on change.

Accessibility

Rules that should remain intact when adapting the component to a product.

Label and value read in order; hiding the label keeps it for screen readers.

The pop animation stops with reduced motion; leave bump off for clocks.