Nederlandse productteams gebruiken de woorden “component library” en “design system” door elkaar, en betalen dat met divergente knoppen. Dit artikel scheidt de lagen, omdat de module UI Patronen van NLCodeCraft Frontend Academy anders een workshop over tools wordt. Mark van Leeuwen ziet in Amsterdam zowel te kleine libraries (één Button met twaalf booleans) als te grote systemen (een intern Material dat niemand durft te wijzigen).

Een component library is code: Button, TextField, Dialog, met varianten en toegankelijke defaults. Een design system is afspraak plus tokens plus documentatie plus governance: wie mag een variant toevoegen, hoe een breaking change loopt, hoe merkkleur naar –token-color-brand. Zonder governance is de library een map components/ die na een reorganisatie wees wordt.

Wat in Amsterdamse merken extra wringt: meertalige copy, overheidsachtige toegankelijkheid, en merkwijzigingen na fusies. Tokens maken die pijn kleiner. Hex in tachtig bestanden maakt die pijn tot een kwartaalproject. De React cursus leert u componenten knippen; UI Patronen leert u waar het knippen stopt.

Headless libraries zijn geen ontsnapping aan vakmanschap. Zij lossen focus-val en keyboard-interactie op als u ze goed koppelt. Zij lossen uw token-chaos niet op. Wie Radix installeert zonder Button-beleid, heeft een dependency, geen systeem.

const tokens = {
  space: { 100: "4px", 200: "8px", 400: "16px" },
  color: { ink: "#0f172a", brand: "#4f46e5" },
} as const;

Test de primitieve, niet de pagina. Een Dialog zonder focus-trap-test is een visueel ding. Koppel dit aan het Testing Lab als u de library serieus wilt beheren. Coverage-percentages op snapshot-bestanden zijn het tegenovergestelde van serieus.

Als u intern “we hebben al een design system” hoort: vraag naar de token-PR van de laatste merkwijziging. Bestaat die niet, dan hebt u een Figma-bestand. Dat is nuttig. Het is geen systeem in productie. In Amsterdamse merkenorganisaties is die verwarring duur: marketing levert nieuwe hex-codes, frontend zoekt-en-vervangt, QA vindt drie knoppen die net niet hetzelfde zijn. Tokens plus governance korten dat af. Tools zonder afspraak verlengen het.

Begin klein. Vijf primitieve, twee patronen, één pagina die ze gebruikt. Groei daarna. Wie in week één een volledig intern Material belooft, levert in week acht een half documentatie-siteje dat niemand durft te mergen. Craft is stoppen voordat de library groter is dan het product.