Introduction
What Granularity is, and the one decision that shapes everything else about it.
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, 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.
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
- The first component carries the tokens, the base layer and the themes named in
themes.names. - Every component after it adds anything from a couple of hundred bytes to a few kilobytes of CSS — whatever its own graph weighs.
- 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.
npm i @feugene/granularitypnpm add @feugene/granularityyarn add @feugene/granularitybun add @feugene/granularityPlus the build pipeline — @feugene/granum and @feugene/granum-engine-wind;
the full list is in getting started.
Selecting components
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 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 first.