Foundation

Density

Density controls the spacing feel of Kikita UI primitives without changing their semantic size or interaction model.

Density values

The published package exposes a typed KuiDensity union for compact, regular, and comfortable experiences.

NameTypeDefaultDescription
compactKuiDensity — Dense operational surfaces such as toolbars, tables, and high-frequency controls.
regularKuiDensity — Default application density and the safest choice for documentation examples.
comfortableKuiDensity — Touch-heavy or spacious contexts where larger hit areas matter more than density.

Global defaults

Set density through theme seeds. Use provideKikitaUi defaults.size for app-wide control size, not for density.

import { DEFAULT_KUI_THEME, provideKikitaUi } from '@kikita-labs/ui';

provideKikitaUi({
  theme: {
    seeds: {
      ...DEFAULT_KUI_THEME.seeds,
      density: 'regular',
    },
  },
});
  • provideKikitaUi() sets data-kui-density on the root element from seeds.density, on the server too, unless the page already set it, and density.css turns it into the horizontal padding.
  • Density is a theme seed, not a component default: it is not part of defaults, and it never changes control height.

Control recommendations

Height follows the size cascade. Density rebinds horizontal padding and spacing rhythm only.

NameTypeDefaultDescription
Control height (xs / sm / md / lg)28px / 32px / 40px / 44px — Set by local size inputs, component providers, or provideKikitaUi defaults.size. Density does not affect height.
Button x padding8px / 12px / 16px — Horizontal control padding across compact, regular, and comfortable density.

Component tokens

Density rebinds the padding tokens below; height tokens resolve from data-kui-size instead.

--kui-btn-px-compact
--kui-btn-px-regular
--kui-btn-px-comfortable