# Введение

> Что такое Granularity и какое одно решение задаёт в ней всё остальное.

- Page: https://granularity.tech/ru/docs/introduction
- Last reviewed: 2026-10-15

Granularity — дизайн-система для Vue 3: компоненты, основы и конвейер, который
собирает из них CSS. Имя здесь не украшение, а описание того единственного
решения, из которого следует всё остальное.

## Выбор, а не дробление

Большинство библиотек компонентов дают гранулярность дроблением на подпакеты:
ядро, потом формы, потом навигация. Эта отказывается, и причина измерима:
**большинство рёбер её графа зависимостей пересекают границы её же групп
каталога** — точная доля [считается на каждой сборке](/ru/architecture), потому
что она меняется вместе с библиотекой. `GrDrawer` рендерит `GrButton`.
`GrPagination` рендерит `GrSelect`. `GrDataTable` рендерит `GrCheckbox`.
Разрежьте по этим группам — получите пакеты, зависящие друг от друга кольцом.

:::callout{type="info"}
Группы каталога существуют для читателя, который ищет компонент под задачу. Они
никогда не описывали, кто кого рендерит, и не описывают.
:::

Поэтому гранулярность берётся с другого конца. Вы называете компоненты, которые
рендерите; сборка разрешает их граф зависимостей и эмитит ровно тот CSS. Ядро —
один пакет, одна версия, один changelog, и бандл растёт от того, что вы
используете. Спутники вроде графиков и редактора живут отдельными пакетами со
своими версиями, но ядро внутри не режется.

## Чем именно платите

:::steps
1. Первый компонент несёт токены, базовый слой и темы, названные в `themes.names`.
2. Каждый следующий добавляет от пары сотен байт до нескольких килобайт стилей — столько, сколько весит его собственный граф.
3. В рантайме не подтягивается ничего: у ядра ноль runtime-зависимостей.
:::

Числа за этими тремя строками сняты с настоящей сборки и стоят на
[главной](/ru) — это именно они, а не округление.

::package-manager{npm="npm i @feugene/granularity" pnpm="pnpm add @feugene/granularity" yarn="yarn add @feugene/granularity" bun="bun add @feugene/granularity"}

Плюс конвейер на сборку — `@feugene/granum` и `@feugene/granum-engine-wind`;
полный состав — в [быстром старте](/ru/docs/getting-started).

## Выбор компонентов

```js title="granum.config.mjs"
import { windEngine } from '@feugene/granum-engine-wind'
import { defineGranumConfig } from '@feugene/granum/vite'

export default defineGranumConfig({
  engine: windEngine(),
  providers: ['@feugene/granularity'],
  components: [{ provider: '@feugene/granularity', names: ['GrButton', 'GrCard'] }],
  themes: { names: ['light', 'dark'] },
})
```

## Куда дальше

Если нужно запустить — [быстрый старт](/ru/docs/getting-started) самая короткая
полезная страница сайта. Если хочется сначала понять, почему экспорты устроены
так, читайте [архитектуру](/ru/architecture).