---
title: "Cooldown Bar"
description: "A slim progress bar with a label and monospace countdown for command cooldowns."
---

A slim progress bar with a label and monospace countdown for command cooldowns. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Cooldown Bar — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add cooldown-bar
```

Files written — React: components/ui/cooldown-bar.tsx. Vue: components/ui/cooldown-bar/CooldownBar.vue, components/ui/cooldown-bar/CooldownBarLabel.vue, components/ui/cooldown-bar/CooldownBarValue.vue, components/ui/cooldown-bar/CooldownBarTrack.vue, components/ui/cooldown-bar/index.ts.

## Usage

React:

```tsx
import { CooldownBar } from "@/components/ui/cooldown-bar"
```

Vue:

```ts
import { CooldownBar, CooldownBarLabel, CooldownBarValue, CooldownBarTrack } from "@/components/ui/cooldown-bar"
```

## API reference

**`CooldownBarTrack`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | — | Fill percentage, 0-100. |
| `ready` | `boolean \| undefined` | — | Switch the fill to the "ready" (online green) colour. |

The registry exports `CooldownBar`, `CooldownBarLabel`, `CooldownBarValue`, `CooldownBarTrack`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Preserve the native semantics of the rendered elements and pass through ARIA attributes when the surrounding context needs a label or description. Any interactive child needs a visible focus indicator, and meaning must not rely on colour alone.

## Tokens

Cooldown Bar reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.