# @snack-uikit/typography

> Текст во всех доступных стилях

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

## Install

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

## 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 | 377 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/typography
- Repository: https://github.com/cloud-ru-tech/snack-uikit
- Homepage: https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/typography
- Issues: https://github.com/cloud-ru-tech/snack-uikit/issues
- npm.io page: https://npm.io/package/@snack-uikit/typography

## 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.14-preview-fc6b5b87.0 — 2026-08-20
- 0.8.13 — 2026-05-18
- 0.8.12 — 2026-01-19
- 0.8.11 — 2025-09-01
- 0.8.11-preview-2ce82c96.0 — 2025-09-01
- 0.8.11-preview-dbf3f886.0 — 2025-08-27
- 0.8.11-preview-af47d898.0 — 2025-08-27
- 0.8.11-preview-05f26bf6.0 — 2025-08-27
- 0.8.11-preview-23549ae9.0 — 2025-08-25
- 0.8.10 — 2025-07-16
- … 59 more at https://npm.io/package/@snack-uikit/typography/versions

## README

# Typography

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

[Changelog](./CHANGELOG.md)

## Description

- Пакет `@snack-uikit/typography` предоставляет компонент `Typography` для единообразного отображения текстового контента с поддержкой различных шрифтов, размеров и ролей.
- Компонент позволяет задавать типографику через комбинацию трёх обязательных пропсов: `family` (шрифт), `purpose` (роль текста) и `size` (размер), что обеспечивает гибкость и консистентность оформления текста во всём приложении.
- Поддерживает пять типов шрифтов: `sans` (основной), `light` (лёгкий), `link` (для ссылок), `mono` (моноширинный) и `crossed-out` (зачёркнутый).
- Предоставляет пять ролей текста: `display` (крупные заголовки), `headline` (заголовки), `title` (подзаголовки), `label` (метки) и `body` (основной текст).
- Поддерживает три размера: `s` (малый), `m` (средний) и `l` (большой).
- Позволяет выбирать HTML-тег для рендеринга (`span`, `h1`-`h6`, `div`, `label`, `p`), что обеспечивает правильную семантику и доступность.
- Автоматически генерирует предустановленные варианты компонента вида `Typography.{Family}{Purpose}{Size}` (например, `Typography.SansDisplayS`), которые можно использовать без указания пропсов `family`, `purpose` и `size`.
- Figma: [`Typography`](https://www.figma.com/file/evs7EwrZF4NikYiHp4Fydr/On-boarding-Typography?node-id=35-1948&t=bBnwJl7MOre5YUHS-0).

## Example

```tsx
import { Typography } from '@snack-uikit/typography';

function Example() {
  return (
    <Typography 
      family='sans'
      purpose='display'
      size='s'
      tag='h1'
      className='some-element'
    >
      Some text
    </Typography>
  );
}
```

Также чтобы не указывать пропсы `family`, `purpose` и `size`, воспользуйтесь нужным предустановленным вариантом:

```tsx
import { Typography } from '@snack-uikit/typography';

function Example() {
  return (
    <Typography.SansDisplayS tag='h1' className='some-element'>
      Some text
    </Typography.SansDisplayS>
  );
}
```

Все компоненты вида `<Typography.{Family}{Purpose}{Size} />` генерируются автоматически при выполнении команды `npm run build:packages`.

## Как добавить новый компонент такого вида?
1. Добавить новое свойство в один или несколько объектов FAMILY, PURPOSE, SIZE в файле `constants.ts`, который лежит в  `typography/src/components/constants.ts`
2. Запустить скрипт compile в package.json пакета `@typography`
    ```json
    "npm run build:typography-components && npm run build:constants && npm run build:index"
    ```
3. Готово! Можете использовать `Typography` с новым свойством

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## Typography
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| size* | enum Size: `"s"`, `"l"`, `"m"` | - | Размер |
| purpose* | enum Purpose: `"label"`, `"body"`, `"title"`, `"display"`, `"headline"` | - | Роль |
| family* | enum Family: `"link"`, `"sans"`, `"light"`, `"mono"`, `"crossed-out"` | - | Шрифт |
| tag | enum Tag: `"span"`, `"h1"`, `"h2"`, `"h3"`, `"h4"`, `"h5"`, `"h6"`, `"div"`, `"label"`, `"p"` | span | HTML-тег |
| className | `string` | - | CSS-класс |
| children | `ReactNode` | - | Контент |


[//]: DOCUMENTATION_SECTION_END

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