Primitive / Atomstable

Counter

Numeric badge that compacts overflow values like 99+.

@glinui/uiComponent: 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

73299+
TSX
1import { Counter } from "@glinui/ui"
2
3export function Demo() {
4 return (
5 <div className="flex items-center gap-2">
6 <Counter value={7} />
7 <Counter variant="glass" value={32} />
8 <Counter variant="outline" value={120} max={99} />
9 </div>
10 )
11}

Accessibility

  • Use `aria-label` to describe what the count represents.

ARIA Attributes

  • `aria-live="polite"` for dynamically updating counts

Reduced Motion

Counter updates are static by default with no animated value tweening.

API Reference

PropTypeRequiredDefaultDescription
valuenumberYes-Current numeric value.
maxnumberNo99Maximum before collapsing into `max+` format.
variant"default" | "glass" | "outline" | "ghost"NodefaultSurface treatment.
size"sm" | "md" | "lg"NomdCounter density.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Counter } from "@glinui/ui"

Source Files

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/counter.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

CounterProps

CounterProps

PropTypeRequiredDefaultDescription
maxnumberNo99-
size"sm" | "md" | "lg"No"md"Variant option from counterVariants.
valuenumberYes--
variant"default" | "glass" | "outline" | "ghost"No"default"Variant option from counterVariants.