nldd

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: