Counter

Numeric counter pills for nav counts and unread totals, plus the Kbd keyboard-shortcut hint used in the sidebar's quick search.

3249115299+1.2k
⌘K⌘L⇧⌘Pesc

Installation

You can add this counter component using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add counter

Using a shared UI package or custom import aliases? Configure your installation paths before running the CLI. Copy-paste examples use the default imports.

Colors

neutral (the default) sits on light surfaces; primary is tuned for the blue gradient surfaces like the primary button and selected nav items.

<Counter color="neutral">91</Counter> {/* neutral pill (default) */}<Counter color="primary">152</Counter> {/* for primary/gradient surfaces */}

Kbd

The Kbd shortcut hint shares the counter's shape. It's a separate registry item - add it with npx boardui add kbd.

⌘L⌘Kesc
import { Kbd } from "@/components/base/kbd/kbd"; <Kbd>⌘L</Kbd><Kbd>⌘K</Kbd><Kbd>esc</Kbd>

Renamed from Badge

Counter was called Badge. npx boardui add badge still works: it installs Counter plus a small badge.tsx that re-exports it as Badge, so existing imports keep working.

// Projects that installed it as Badge keep working: badge.tsx re-exports Counterimport { Badge } from "@/components/base/badges/badge"; // New codeimport { Counter } from "@/components/base/badges/counter";