# Introduction

> What Granularity is, and the one decision that shapes everything else about it.

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

Granularity is a design system for Vue 3: components, foundations and the
pipeline that assembles their CSS. The name is not decoration — it describes the
one decision everything else follows from.

## Selection, not subdivision

Most component libraries offer granularity by splitting into sub-packages: a core,
then forms, then navigation. This one refuses to, and the reason is measurable:
**most of its dependency edges cross the boundaries of its own catalogue groups** —
the exact share is [recomputed on every build](/architecture), because it moves
with the library. `GrDrawer` renders `GrButton`. `GrPagination` renders `GrSelect`.
`GrDataTable` renders `GrCheckbox`. Split along those groups and you get packages
that depend on each other in a ring.

:::callout{type="info"}
The catalogue groups exist for readers looking for a component. They were never
meant to describe who renders whom, and they do not.
:::

So granularity comes from the other end. You name the components you render; the
build resolves their dependency graph and emits exactly that CSS. The core is one
package, one version, one changelog — and a bundle that grows by what you use.
Companions such as charts and the editor live in packages of their own with their
own versions, but the core itself is never cut up.

## What you pay, concretely

:::steps
1. The first component carries the tokens, the base layer and the themes named in `themes.names`.
2. Every component after it adds anything from a couple of hundred bytes to a few kilobytes of CSS — whatever its own graph weighs.
3. Nothing is pulled in at run time: the core has zero runtime dependencies.
:::

Numbers behind those three lines, measured on a real build, are on the
[home page](/) — and they are the numbers, not a rounding of them.

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

Plus the build pipeline — `@feugene/granum` and `@feugene/granum-engine-wind`;
the full list is in [getting started](/docs/getting-started).

## Selecting components

```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'] },
})
```

## Where to go next

If you want it running, [getting started](/docs/getting-started) is the shortest
useful page on this site. If you want to know why the exports are shaped the way
they are before you commit, read [architecture](/architecture) first.