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

• NVM

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.