Knit UI
GitHub

Tokens

Every style prop in the kit takes a token: p="$md", gap="$sm", br="$lg", fz="$sm". Tokens are what make spacing consistent, theming possible, and a design change a one-line edit.

The tables below are generated from packages/core/src/config/scales.ts, so they are the values your components actually resolve.

One key, several scales

A token key resolves per property. $md on height is size.md; on padding it is space.md; on fontSize it is fontSize.md; on borderRadius it is radius.md. That is why a single size="md" can set a control's height, padding, font and radius coherently.

<Box p="$md" br="$md" height="$md" />
// padding 12 · radius 8 · height 40

space

padding · margin · gap

TokenValueScale
$xxs2px
$xs4px
$sm8px
$md12px
$lg16px
$xl24px
$xxl32px

size

width · height · control heights

TokenValueScale
$xxs18px
$xs24px
$sm32px
$md40px
$lg48px
$xl64px
$xxl96px

radius

borderRadius

TokenValueScale
$xxs1px
$xs2px
$sm4px
$md8px
$lg16px
$xl32px
$xxl64px

fontSize

fontSize

TokenValueScale
$xxs12px
$xs14px
$sm16px
$md18px
$lg20px
$xl24px
$xxl28px

lineHeight

multiplier applied to fontSize

TokenValue
$xxs1.35×
$xs1.45×
$sm1.5×
$md1.45×
$lg1.4×
$xl1.35×
$xxl1.3×

Line height

Line height is a multiplier, resolved against the font size. The ladder is a hump rather than a climb, and the reasoning is worth reading:

From the source

Unitless line-height multipliers (resolved to px against each font size). The ladder is a HUMP: it rises to 1.5 at `sm` and then TAPERS to 1.3, because the right amount of leading depends on what a size is used for, not just how big it is. The bottom steps are captions, labels and dense UI chrome — short strings where a tall line box just pads the control — so they run tighter. The middle is prose read over many lines, which wants the most air. The top steps are display copy, where a body ratio reads as a gap between lines rather than leading. A ladder that only climbs (the previous shape here, 1.35 → 1.65) inverts the top half: it made `$xxl` headings 46px tall, double-spaced. This matches the systems the kit draws from, which agree on the shape even though they express it differently. Mantine ships two scales — body `lineHeights` that climb 1.4 → 1.65 across 12–20px, and `headings.sizes` that taper 1.5 → 1.3 across 14–34px; our single 12–28px font scale spans BOTH ranges, so it has to be the union of the two, which is this hump. Tailwind's built-in pairings trace the same curve: 12/16 (1.33), 16/24 (1.5), 18/28 (1.56), 24/32 (1.33), 48/48 (1.0). Against the `font` scale above this resolves to 16 / 20 / 24 / 26 / 28 / 32 / 36 — every value even (so a `(height − lineHeight) / 2` centering gap stays on whole pixels), the first four on a 4px grid, and each one equal to the leading Tailwind or Mantine gives that same font size. Retuning here moves every derived line height at once — `config/fonts.ts`, `createTheme`'s font scales, and `getLineHeight`.

TokenValue
$xxs1.35×
$xs1.45×
$sm1.5×
$md1.45×
$lg1.4×
$xl1.35×
$xxl1.3×

zIndex

TokenValueTypical use
$00in-flow content
$1100raised surfaces — sticky headers, affixed controls
$2200dropdowns and popovers
$3300overlays and drawers
$4400modals
$5500tooltips and toasts — always on top

Breakpoints

BreakpointMin widthMedia query
$xxs480px(min-width: 480px)
$xs576px(min-width: 576px)
$sm768px(min-width: 768px)
$md992px(min-width: 992px)
$lg1200px(min-width: 1200px)
$xl1408px(min-width: 1408px)
$xxl1920px(min-width: 1920px)

Use them through useMedia() or @knitui/mediaquery — see Responsive.

Colour tokens

Colour comes from the active theme rather than a fixed scale, so it lives on its own page: Color & themes.

The short version: $color1$color12 is a 12-step ramp of the active theme, plus semantic aliases ($background, $borderColor, $color, $placeholderColor) and state variants ($backgroundHover, $borderColorFocus, …).

Shorthands

The kit registers shorthand props for the properties you reach for constantly:

ShorthandProperty
p px py pt pr pb plpadding and its axes/sides
m mx my mt mr mb mlmargin and its axes/sides
bgbackgroundColor
ccolor
brborderRadius
fzfontSize
maw miw mah mihmax/min width and height

They are typed identically to their long forms, and both are always available.

Adding to the scales

Extend rather than replace — see Theme builder, which takes preset names (radius: "rounded", space: "comfortable") or explicit overrides (size: { md: 18 }) and rebuilds the config around them.