NLDD Design System

Web Components voor Nederlandse Digitale Dienst (Rijksoverheid).

Installatie

npm install @nldd/design-system

Gebruik

// 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>

Storybook

Bekijk de live component documentatie: https://minbzk.github.io/storybook/

Claude Code plugin

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.

Development setup

# Dependencies installeren
npm install

# Storybook starten
npm run storybook

# Open http://localhost:6006 voor de component documentatie

Componenten

nldd-button

| 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.

Styling structuur

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 */
--primitives-color-accent-100: #154273;
--primitives-space-16: 16px;

/* Semantics — verwijzen naar primitives */
--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-list-corner-radius: var(--semantics-controls-md-corner-radius);
--components-button-group-sm-gap: var(--primitives-space-6);

/* Context — communicatie tussen componenten */
--context-parent-background-color: var(--semantics-surfaces-background-color);

/* Local — intern binnen een component */
--_background-color: var(--context-parent-background-color);

Feedback en verzoeken

Mis je een component of wil je een wijziging voorstellen? Maak een issue aan.

Fonts

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.

Licentie (License)

De broncode van dit design system valt onder EUPL-1.2. De fontbestanden in src/assets/fonts/ hebben hun eigen licenties — zie NOTICES.md.