# Score counter

Score counter is a neobrutalist React component from Cruise UI. Coins or points in Baloo 2 with a coin or star chip; counts up when it changes, with a floating +50.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/score-counter
```

Import: `import { CruiseScoreCounter } from "@/components/cruise/score-counter";`

## When to use

Game HUDs and loyalty points.

## When not to

Money people spend (show the amount plainly).

## Example (React)

```tsx
"use client";

import { useState } from "react";
import { CruiseButton } from "@/components/cruise/button";
import { CruiseScoreCounter } from "@/components/cruise/score-counter";

export default function ScoreCounterExample() {
  const [coins, setCoins] = useState(12450);
  return (
    <div className="flex flex-wrap items-center gap-6">
      <CruiseScoreCounter value={coins} label="Coins" />
      <CruiseScoreCounter value={980} icon="star" label="Stars" />
      <CruiseButton onClick={() => setCoins((c) => c + 50)}>Collect 50 coins</CruiseButton>
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<span class="score">
  <span class="score-chip" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="8" cy="8" r="6"/><path d="M18.1 10.4A6 6 0 1 1 10.3 18"/></svg></span>
  <span class="score-value" aria-hidden="true">12,450</span>
  <span class="visually-hidden" aria-live="polite">Coins: 12,450</span>
</span>
```

## Props: CruiseScoreCounter

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | — | — |
| `label?` | `string` | `"Coins"` | What it counts, for screen readers ("Coins", "Score"). |
| `icon?` | `ReactNode` | `"coin"` | — |
| `showDelta?` | `boolean` | `true` | Float "+50" when the value goes up. |
| `className?` | `string` | — | — |

## Accessibility

- Screen readers hear the new total once (aria-live polite), never the frames in between.
- Counting and the floating +50 stop under reduced motion.