Web Components voor Nederlandse Digitale Dienst (Rijksoverheid).
npm install @nldd/design-system// Importeer CSS variabelen en fonts (vereist voor styling)
import '@nldd/design-system/styles';
// Importeer alle componenten
import '@nldd/design-system';
// Of importeer specifieke componenten
import { NLDDButton, NLDDCheckbox, NLDDSwitch } from '@nldd/design-system';<!-- Gebruik in HTML -->
<nldd-button variant="accent-filled" text="Opslaan"></nldd-button>
<nldd-checkbox-field label="Akkoord met voorwaarden"></nldd-checkbox-field>
<nldd-switch-field label="Meldingen inschakelen"></nldd-switch-field>Bekijk de live component documentatie: https://minbzk.github.io/storybook/
Deze repository is ook een Claude Code marketplace. De nldd-plugin geeft
Claude de kennis om applicaties te bouwen bovenop @nldd/design-system: de
juiste tags, attributen, CSS-tokens en patronen.
Toevoegen en installeren:
/plugin marketplace add MinBZK/storybook
/plugin install nldd@nldd-plugins
Bijwerken naar een nieuwere versie doe je met /plugin marketplace update nldd-plugins.
# Dependencies installeren
npm install
# Storybook starten
npm run storybook
# Open http://localhost:6006 voor de component documentatie| Attribuut | Type | Default | Beschrijving |
|---|---|---|---|
text |
string | '' |
Tekst van de button |
variant |
string | neutral-tinted |
primary, secondary, destructive, accent-filled, accent-transparent, neutral-tinted, neutral-transparent, critical-tinted, critical-transparent |
size |
string | md |
xs, sm, md |
disabled |
boolean | false |
Uitgeschakelde staat |
type |
string | button |
button, submit, reset |
full-width |
boolean | false |
Rekt de button uit over de volledige breedte van de container |
start-icon |
string | '' |
Icoon aan het begin van de button |
end-icon |
string | '' |
Icoon aan het einde van de button |
expandable |
boolean | false |
Voegt een icoon toe dat aangeeft dat de button een menu of popover opent |
href |
string | undefined |
Rendert als link (<a>) in plaats van een button |
accessible-label |
string | '' |
Toegankelijk label voor schermlezers |
popovertarget |
string | '' |
ID van het popover-element |
Zie de Storybook-documentatie voor alle componenten.
CSS variabelen zijn georganiseerd in vijf lagen:
| Laag | Prefix | Beschrijving |
|---|---|---|
| Primitives | --primitives-* |
Basis waarden (kleuren, spacing, typography) |
| Semantics | --semantics-* |
Betekenisvolle variabelen (buttons, controls, surfaces) |
| Components | --components-* |
Component-specifieke variabelen |
| Context | --context-* |
Gedeelde variabelen voor communicatie tussen componenten |
| Local | --_* |
Interne variabelen binnen een component (niet bedoeld voor extern gebruik) |
/* Primitives — basis waarden. Een kleur draagt zijn licht- en donkerwaarde
samen in één light-dark()-paar; de rest is een kale waarde. */
--primitives-color-lintblauw-100: light-dark(oklch(0.897 0.044 253.4), oklch(0.262 0.044 253.4));
--primitives-color-accent-100: var(--primitives-color-lintblauw-100);
--primitives-space-16: 16px;
/* Semantics — verwijzen naar primitives. light-dark() staat hier om per schema
een ANDERE stap te kiezen, niet om een kleur te definiëren. */
--semantics-buttons-accent-filled-background-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
--semantics-controls-md-min-size: var(--primitives-space-44);
/* Components — verwijzen naar semantics of primitives */
--components-box-background-color: var(--semantics-surfaces-tinted-background-color);
--components-button-group-sm-gap: var(--primitives-space-6);
/* Context — communicatie tussen componenten */
--context-parent-background-color: var(--semantics-surfaces-base-background-color);
/* Local — intern binnen een component */
--_background-color: var(--context-parent-background-color);De kleurpaletten staan in src/assets/styles/colors.generated.css en worden
gegenereerd; de accent-laag wijst naar een van die paletten, zodat één regel de
huisstijlkleur van het hele systeem bepaalt.
Mis je een component of wil je een wijziging voorstellen? Maak een issue aan.
Het design system gebruikt twee fonts, met verschillende licenties:
- JetBrains Mono (monospace) — vrij te gebruiken onder de SIL Open Font License 1.1.
- Rijksoverheid Sans (
RijksSansWeb) — auteursrechtelijk beschermd door de Staat der Nederlanden. Uitsluitend bedoeld voor publicaties van de Rijksoverheid of partijen die in opdracht van de Rijksoverheid werken. Voor ander gebruik is voorafgaande schriftelijke toestemming vereist; neem contact op met de Rijksvoorlichtingsdienst.
Volledige licentie-informatie staat in NOTICES.md. Door
de fonts mee te leveren in deze repository wordt geen licentie verleend
buiten het hierboven beschreven kader.
Copyright © 2026 Staat der Nederlanden.
De broncode van dit design system valt onder de EUPL-1.2. De volledige
licentietekst staat in LICENSE.
De fontbestanden in src/assets/fonts/ vallen daar niet onder; die hebben hun
eigen licenties, zie NOTICES.md.
Verder horen bij dit project een gedragscode, een beveiligingsbeleid, een bijdragegids, een ondersteuningspagina en een beschrijving van wie waarover beslist.