developer.overheid.nl

Ontwikkelaarsportaal van de Nederlandse overheid

Ga naar hoofdinhoud

Aan de slag met NL Design System

Wil je snel aan de slag met NL Design System? In deze handleiding laten we je zien hoe je het lokaal kunt opzetten en hoe je experimenteert met de beschikbare componenten.

Benodigdheden​

Aan de slag​

Stap 1: Installeer de juiste versie van NodeJS met nvm​

Gebruik nvm om de juiste versie van node te installeren.

nvm install 22.13.1
nvm use 22.13.1

Stap 2: Installeer Vite, genereer een React project​

npm install -g vite@6.1.0

Maak vervolgens een nieuwe React-app met Vite:

npm create vite@6.1.0 nl-design-system-playground -- --template react

Stap 3: Installeer dependencies​

Ga naar je nieuwe projectmap en installeer de benodigde pakketten:

cd nl-design-system-playground
npm install

Voeg vervolgens de benodigde NL Design System libraries toe:

npm install --save-dev @rijkshuisstijl-community/components-react
npm install --save-dev @rijkshuisstijl-community/design-tokens
npm install --save-dev @rijkshuisstijl-community/font

Stap 4: Importeer het thema en de componenten​

Open src/App.jsx en voeg de volgende imports toe:

import '@rijkshuisstijl-community/design-tokens/dist/index.css'; // importeer het theme.
import '@rijkshuisstijl-community/font/src/index.mjs'; // font importeren.
import '@rijkshuisstijl-community/components-css/dist/index.css'; // importeer de CSS van de components.

Stap 5: Voeg je eerste componenten toe​

Gebruik een paar standaardcomponenten om te zien hoe het werkt. Voeg deze code toe aan src/App.jsx:

import { Button, Card, Alert, Checkbox, Blockquote } from "@rijkshuisstijl-community/components-react";

Vervang de huidige template voor een wrapper met daarin het button component.

return (
  <div className="rhc-theme">
    <Button>Klik hier!</Button>
    <Button appearance="primary-action-button">Of hier!</Button>

    <br/><br/>

    <Card
      appearance="default"
      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      heading="Standaard Card"
      href="#"
      imageAlt="Placeholder"
      imageSrc="https://rijkshuisstijl-community.vercel.app/placeholder.jpg"
      linkLabel="Lees meer"
      metaData="Metadata"
      title="Card Title"
    />

    <br/>

    <Alert
      heading="Succes!"
      textContent="Je hebt succesvol een component toegevoegd."
      type="ok"
    />

    <br/>

    <Checkbox checked value="Re-use rather than reinvent" aria-label="Reuse checkbox"/>

    <br/><br/>

    <Blockquote attribution="— Aaron Swartz" variation="pink-background">
      “Be curious. Read widely. Try new things. What people call intelligence just boils down to curiosity.”
    </Blockquote>
  </div>
);

Stap 6: Verwijder de boilerplate CSS​

Comment twee regels uit om de standaard-styling van Vite uit te schakelen.

In src/main.jsx:

// import './index.css'

In src/App.jsx:

// import './App.css'

Stap 7: Start de development server​

Draai je project lokaal met:

npm run dev

Je zou nu een werkende interface moeten zien in je browser.

Bekijk meer componenten​

Meer componenten vind je in de Storybook omgeving van de Rijkshuisstijl Community van NL-Design-System.

Bijdragen​

De componenten van Rijkshuisstijl Community zijn open source, als je wilt meedoen zijn de volgende links handig.

  • Bug gevonden of code bekijken? Bezoek de GitHub repository.
  • Benieuwd naar onze voortgang? Bekijk de huidige werkzaamheden op het Sprint Board.
  • Blijf in contact met de community! Word lid van de Code for NL Slack en join het #nl-design-system kanaal om samen te werken met de community.