# Web Components
If you want to use the components library, you can use custom elements in your HTML page to render the components. The npm package `@utrecht/web-component-library-stencil` contains the implementation of every web component, but each component will be loaded separately and on-demand, so including the entire component library will not slow down your application.
## Getting started
Include the Design Token CSS variables:
```html
```
Combine it with the latest Web Components (for convenience you can use the unpkg CDN), for example:
```html
```
Then you can go ahead and see the result:
```html
Page styled with NL Design System
```
## `Content-Security-Policy`
Autodiscovery of the nonce will ensure the CSS for lazy loaded components can be loaded in pages with a strict CSP configuration. To safely configure the nonce, render a `style` element early in the `` of your HTML page, with a cryptographically strong random value in the `nonce` attribute that you must generate for each request. For example:
```html
```
The nonce must match with the nonce you provide in the `Content-Security-Policy` HTTP header for the web page. For example:
```text
Content-Security-Policy: default-src 'self'; style-src 'self' 'nonce-2346ad27d7568ba9896f1b7da6b5991251debdf2'
Content-Type: text/html
```
**You MUST NOT use a hardcoded value for the nonce.** Do not copy the example code as-is.