Counter

Installation$

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add counter

Usage$

Counter displays a numeric value inside a compact badge. When value exceeds max, it collapses to the max+ format (e.g., 99+). It uses tabular-nums to keep the badge width stable as the number changes.

Basic$

1import { Counter } from "@glinui/ui"
2
3export function CounterBasicDemo() {
4return <Counter value={5} />
5}

Examples$

Overflow$

When value exceeds max (default 99), the display collapses to max+ to prevent layout shift.

import { Counter } from "@glinui/ui"
export function CounterOverflowDemo() {
return (

1import { Counter } from "@glinui/ui"
2
3export function CounterOverflowDemo() {
4return (
5  <div className="flex items-center gap-4">
6    <Counter value={42} />
7    <Counter value={99} />
8    <Counter value={150} />
9    <Counter value={1200} />
10  </div>
11)
12}

Custom Max$

Override the collapse threshold with max to suit different contexts — notification trays, cart counts, or mention lists.

import { Counter } from "@glinui/ui"
export function CounterCustomMaxDemo() {
return (

1import { Counter } from "@glinui/ui"
2
3export function CounterCustomMaxDemo() {
4return (
5  <div className="flex items-center gap-4">
6    <Counter value={42} max={50} />
7    <Counter value={55} max={50} />
8    <Counter value={9} max={9} />
9    <Counter value={10} max={9} />
10  </div>
11)
12}

Variants$

import { Counter } from "@glinui/ui"
export function CounterVariantDemo() {
return (

1import { Counter } from "@glinui/ui"
2
3export function CounterVariantDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-3">
6    <Counter value={7} variant="default" />
7    <Counter value={7} variant="glass" />
8    <Counter value={7} variant="outline" />
9    <Counter value={7} variant="ghost" />
10  </div>
11)
12}

Sizes$

import { Counter } from "@glinui/ui"
export function CounterSizeDemo() {
return (

1import { Counter } from "@glinui/ui"
2
3export function CounterSizeDemo() {
4return (
5  <div className="flex flex-wrap items-center gap-3">
6    <Counter value={12} size="sm" />
7    <Counter value={12} size="md" />
8    <Counter value={12} size="lg" />
9  </div>
10)
11}

Accessibility$

• Counter should be accompanied by a visible label in its surrounding context (e.g., "Notifications: 12") so the number is not the sole conveyor of meaning.
• When used as a live notification badge, wrap the containing element with aria-live="polite" so screen readers announce value changes.
• The truncated max+ format must be interpreted from context — add an aria-label to clarify if necessary (e.g., aria-label="More than 99 notifications").
• Do not rely on the counter's color alone to communicate urgency; pair with surrounding labels.

Reduced Motion$

Counter is a static numeric display with no animation. No reduced-motion considerations apply.

API Reference$

Source$

1import { Counter } from "@glinui/ui"