# @snack-uikit/counter

> Компонент для отображения количесвта уведомлений (доступен в 3 вариантах: 9, 9+, 9K)

Latest version **1.0.1** (published 2026-09-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @snack-uikit/counter
pnpm add @snack-uikit/counter
yarn add @snack-uikit/counter
bun add @snack-uikit/counter
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2026-09-21 |
| First published | 2023-12-05 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 49.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Author | Anna Kozlova |
| Maintainers | yetihead, agrigorii, cloud-ru-tech |

## Links

- npm: https://www.npmjs.com/package/@snack-uikit/counter
- Repository: https://github.com/cloud-ru-tech/snack-uikit
- Homepage: https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/counter
- Issues: https://github.com/cloud-ru-tech/snack-uikit/issues
- npm.io page: https://npm.io/package/@snack-uikit/counter

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [@snack-uikit/utils](https://npm.io/package/@snack-uikit/utils.md) ^5.0.0

## Recent versions

- 1.0.1 (latest) — 2026-09-21
- 1.0.1-preview-acb79d0b.0 (preview) — 2026-09-21
- 1.0.1-preview-b2e4ed46.0 — 2026-09-21
- 1.0.1-preview-27969f64.0 — 2026-09-21
- 1.0.1-preview-fe85442f.0 — 2026-09-18
- 0.8.13-preview-fc6b5b87.0 — 2026-08-20
- 0.8.12 — 2026-05-18
- 0.8.11 — 2026-01-19
- 0.8.10 — 2025-09-01
- 0.8.10-preview-2ce82c96.0 — 2025-09-01
- 0.8.10-preview-dbf3f886.0 — 2025-08-27
- 0.8.10-preview-af47d898.0 — 2025-08-27
- 0.8.10-preview-05f26bf6.0 — 2025-08-27
- 0.8.10-preview-23549ae9.0 — 2025-08-25
- 0.8.9 — 2025-07-16
- … 63 more at https://npm.io/package/@snack-uikit/counter/versions

## README

# Counter

## Installation
`npm i @snack-uikit/counter`

[Changelog](./CHANGELOG.md)

## Description

- Пакет `@snack-uikit/counter` предоставляет компонент `Counter` для отображения числовых индикаторов (счётчиков уведомлений, количеств элементов, метрик и т.п.) в компактном виде.
- Компонент поддерживает несколько вариантов отображения значения: обычный счётчик (`count`), формат с плюсом при превышении порога (`count-plus`) и укороченную запись в тысячах (`count-k`), управляемую пропами `variant` и `plusLimit`.
- Размер (`size`) и внешний вид (`appearance`, `color`) позволяют адаптировать счётчик под разные сценарии — от базовых меток до критических состояний.
- Форматированное значение отображается в едином контейнере без дополнительных иконок или кнопок, за счёт чего компонент хорошо подходит для использования внутри других UI-элементов (кнопок, тегов, пунктов меню).
- Figma: [`Snack UI Kit — Counter`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=7%3A4148&mode=design).

## Example

```tsx
import { Counter } from '@snack-uikit/counter';

function Example() {
  return (
    <>
      <Counter value={9} />

      <Counter
        value={10}
        variant='count-plus'
        plusLimit={9}
        appearance='red'
        size='m'
      />

      <Counter
        value={8500}
        variant='count-k'
        color='decor'
      />
    </>
  );
}
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## Counter
Компонент счетчик
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| value* | `number` | - | Значение |
| appearance | enum Appearance: `"primary"`, `"neutral"`, `"red"` | primary | Внешний вид |
| variant | enum Variant: `"count"`, `"count-plus"`, `"count-k"` | count | Вариант |
| size | enum Size: `"s"`, `"m"` | s | Размер |
| plusLimit | `number` | 10 | Порог сокращения значения в формат v+. Например `1500` -> `999+` для 1000 |
| className | `string` | - | CSS-класс |
| color | enum Color: `"accent"`, `"decor"` | accent | Семантический цвет |


[//]: DOCUMENTATION_SECTION_END

---
_Source: https://npm.io/package/@snack-uikit/counter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._