Skip to main content

UI systems & component libraries

Overview​

UI systems bundle design tokens, components (buttons, dialogs, tables), and documentation so product teams ship consistent interfaces faster. They may be CSS-first (Bootstrap, Tailwind), React-centric (MUI, Radix + shadcn), or tied to a vendor design language.

Key concepts​

  • Design tokens: Color, type, spacing, radii as data or CSS variables.
  • Primitives vs patterns: Low-level controls vs composed flows (wizard, data table).
  • Accessibility: Focus management, ARIA, keyboard support built into primitives.
  • Theming: Light/dark, brand swaps, density modes.
  • Versioning: Semver, codemods, and migration guides for breaking changes.

Adoption flow​

Sample: Tailwind-style utility usage (illustrative)​

<button
  class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500"
  type="button"
>
  Primary action
</button>

References​