Gathering detailed insights and metrics for @utrecht/component-library-react
Gathering detailed insights and metrics for @utrecht/component-library-react
Work in Progress: Utrecht Design System based on the NL Design System architecture. Storybook: https://nl-design-system.github.io/utrecht/storybook/
Installations
npm install @utrecht/component-library-reactDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
22.15.0
NPM Version
10.9.2
Releases
925
@utrecht/component-library-css@7.3.0
@utrecht/component-library-css@7.3.0
Updated on Jun 18, 2025
@utrecht/design-tokens@3.3.0
@utrecht/design-tokens@3.3.0
Updated on Jun 18, 2025
@utrecht/tooltip-react@1.0.0
@utrecht/tooltip-react@1.0.0
Updated on Jun 18, 2025
@utrecht/tooltip-css@1.0.0
@utrecht/tooltip-css@1.0.0
Updated on Jun 18, 2025
@utrecht/component-library-vue@2.3.1
@utrecht/component-library-vue@2.3.1
Updated on Jun 16, 2025
@utrecht/design-tokens@3.2.0
@utrecht/design-tokens@3.2.0
Updated on May 27, 2025
Languages
8
TypeScript
SCSS
HTML
JavaScript
MDX
CSS
Vue
Shell
TypeScript (73.02%)
SCSS (12.42%)
HTML (5.82%)
JavaScript (4.42%)
MDX (2.33%)
CSS (1.14%)
Vue (0.84%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
EUPL-1.2 License
29 Stars
3,715 Commits
23 Forks
7 Watchers
258 Branches
48 Contributors
Updated on Jun 28, 2025
Maintainers
3
Package Meta Information
Latest Version
10.2.0
Package Id
@utrecht/component-library-react@10.2.0
Unpacked Size
1.08 MB
Size
186.42 kB
File Count
606
NPM Version
10.9.2
Node Version
22.15.0
Published on
May 27, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
103
clsxlodash.chunk@utrecht/accordion-css@utrecht/alert-css@utrecht/alert-dialog-css@utrecht/alternate-lang-nav-css@utrecht/article-css@utrecht/backdrop-css@utrecht/badge-counter-css@utrecht/badge-list-css@utrecht/badge-status-css@utrecht/blockquote-css@utrecht/breadcrumb-nav-css@utrecht/button-group-react@utrecht/button-link-css@utrecht/button-react@utrecht/calendar-react@utrecht/card-css@utrecht/card-react@utrecht/checkbox-react@utrecht/code-block-css@utrecht/code-css@utrecht/color-sample-css@utrecht/column-layout-css@utrecht/combobox-react@utrecht/currency-data-css@utrecht/custom-checkbox-css@utrecht/data-badge-css@utrecht/data-badge-react@utrecht/data-list-css@utrecht/data-placeholder-css@utrecht/digid-button-css@utrecht/document-css@utrecht/drawer-css@utrecht/emphasis-css@utrecht/fieldset-react@utrecht/figure-css@utrecht/focus-ring-css@utrecht/form-field-checkbox-react@utrecht/form-field-description-react@utrecht/form-field-error-message-react@utrecht/form-field-react@utrecht/form-label-react@utrecht/form-toggle-css@utrecht/heading-1-css@utrecht/heading-2-css@utrecht/heading-3-css@utrecht/heading-4-css@utrecht/heading-5-css@utrecht/heading-6-css@utrecht/heading-group-css@utrecht/html-content-css@utrecht/iban-data-css@utrecht/icon-css@utrecht/img-css@utrecht/index-char-nav-css@utrecht/link-button-css@utrecht/link-list-css@utrecht/link-react@utrecht/link-social-css@utrecht/list-social-css@utrecht/listbox-react@utrecht/logo-button-css@utrecht/logo-css@utrecht/logo-image-css@utrecht/map-control-button-css@utrecht/map-marker-css@utrecht/mark-css@utrecht/multiline-data-css@utrecht/nav-bar-css@utrecht/nav-list-css@utrecht/number-badge-css@utrecht/number-data-css@utrecht/open-forms-container-css@utrecht/open-forms-container-react@utrecht/ordered-list-css@utrecht/page-content-css@utrecht/page-css@utrecht/page-footer-css@utrecht/page-header-css@utrecht/pagination-css@utrecht/paragraph-css@utrecht/pre-heading-css@utrecht/preserve-data-css@utrecht/radio-button-react@utrecht/rich-text-css@utrecht/search-bar-css@utrecht/select-css@utrecht/separator-css@utrecht/skip-link-css@utrecht/subscript-css@utrecht/spotlight-section-css@utrecht/superscript-css@utrecht/surface-css@utrecht/textarea-css@utrecht/table-of-contents-css@utrecht/table-css@utrecht/textbox-react@utrecht/top-task-link-css@utrecht/top-task-nav-css@utrecht/unordered-list-css@utrecht/url-data-css@utrecht/vega-visualization-css
Peer Dependencies
6
Dev Dependencies
43
@babel/core@babel/plugin-transform-runtime@babel/preset-env@babel/preset-react@babel/preset-typescript@babel/runtime@rollup/plugin-babel@rollup/plugin-commonjs@rollup/plugin-json@rollup/plugin-node-resolve@rollup/plugin-typescript@testing-library/dom@testing-library/jest-dom@testing-library/react@testing-library/user-event@types/jest@types/lodash.chunk@types/react@types/testing-library__jest-domgatsbyjestjest-environment-jsdomnextreactreact-domreact-vegarimrafrolluprollup-plugin-deleterollup-plugin-filesizerollup-plugin-node-externalsrollup-plugin-node-polyfillsrollup-plugin-peer-deps-externalrollup-plugin-postcssrollup-plugin-typescript2sasssort-package-jsontslibtypescriptvegavega-embedvega-lite@utrecht/build-utils-react
Component library voor React
Je kunt de React componenten van de @utrecht/component-library-react npm package gebruiken voor je eigen website. Het zijn "white label" componenten, dat betekent dat ze niet de Utrecht huisstijl hebben — je kunt je eigen ontwerp gebruiken met design tokens.
Je kunt deze package gebruiken in React apps, zowel client side als server side, om de juiste HTML elementen te renderen met CSS class names van het Utrecht Design System.
Documentation staat in de Storybook voor Utrecht React componenten.
Aan de slag
1npm install --save-dev --save-exact @utrecht/component-library-react
Wanneer je dit pakketje hebt geïnstalleerd, dan kun je elke component uit de React component gebruiken voor je pagina. Bijvoorbeeld:
1import { Document, Heading1 } from "@utrecht/component-library-react/dist/css-module"; 2 3export const MyPage = () => ( 4 <div className="voorbeeld-theme"> 5 <Document> 6 <Heading1>Page styled with NL Design System</Heading1> 7 </Document> 8 </div> 9);
Als je geen CSS injection wilt, dan kun je dezelfde componenten importeren uit een andere plek (zonder /dist/css-module). CSS injection levert soms problemen op bij websites met een stricte Content-Security-Policy.
1import { Document, Heading1 } from "@utrecht/component-library-react"; 2 3export const MyPage = () => ( 4 <div className="voorbeeld-theme"> 5 <Document> 6 <Heading1>Page styled with NL Design System</Heading1> 7 </Document> 8 </div> 9);
Design toevoegen met een thema
Gebruik je eigen design met de volgende stappen:
- Maak een eigen thema op basis van design tokens.
- Laad de CSS van je thema in. Daarin zitten de CSS variables voor het ontwerp van de componenten.
- Voeg in HTML de CSS class name toe van je theme, op het niveau boven je componenten.
Utrecht huisstijl toevoegen
Installeer de npm package met de CSS:
1npm install --save-dev @utrecht/design-tokens
In veel React projecten is het mogelijk de CSS te importeren in JavaScript. Voeg de import voor de thema CSS toe, en gebruik de utrecht-theme class name op een niveau boven de React componenten.
1import { Document, Heading1 } from "@utrecht/component-library-react"; 2import "@utrecht/design-tokens/dist/index.css"; 3 4export const MyPage = () => ( 5 <div className="utrecht-theme"> 6 <Document> 7 <Heading1>Page styled with NL Design System</Heading1> 8 </Document> 9 </div> 10);
TypeScript
De TypeScript declarations voor de React componenten worden standaard meegeleverd.
Support
Stel je support-vragen in het #nl-design-system-developers Slack-kanaal.
No vulnerabilities found.
Reason
30 commit(s) and 12 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
all changesets reviewed
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: European Union Public License 1.2: LICENSE.md:0
Reason
no binaries found in the repo
Reason
all dependencies are pinned
Details
- Info: 18 out of 18 GitHub-owned GitHubAction dependencies pinned
- Info: 13 out of 13 third-party GitHubAction dependencies pinned
Reason
SAST tool is not run on all commits -- score normalized to 5
Details
- Warn: 16 commits out of 30 are checked with a SAST tool
Reason
branch protection is not maximal on development and all release branches
Details
- Info: 'allow deletion' disabled on branch 'main'
- Info: 'force pushes' disabled on branch 'main'
- Warn: 'branch protection settings apply to administrators' is disabled on branch 'main'
- Info: 'stale review dismissal' is required to merge on branch 'main'
- Warn: required approving review count is 1 on branch 'main'
- Info: codeowner review is required on branch 'main'
- Warn: 'last push approval' is disabled on branch 'main'
- Warn: 'up-to-date branches' is disabled on branch 'main'
- Info: status check found to merge onto on branch 'main'
- Info: PRs are required in order to make changes on branch 'main'
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Info: topLevel 'pull-requests' permission set to 'read': .github/workflows/block-autosquash-commits.yml:6
- Warn: no topLevel permission defined: .github/workflows/commit-lint.yml:1
- Warn: no topLevel permission defined: .github/workflows/continuous-delivery.yml:1
- Warn: no topLevel permission defined: .github/workflows/semantic-pull-requests.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
83 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-593m-55hh-j8gv
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
- Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj
- Warn: Project is vulnerable to: GHSA-xq7p-g2vc-g82p
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gx9m-whjm-85jf
- Warn: Project is vulnerable to: GHSA-mmhx-hmjr-r674
- Warn: Project is vulnerable to: GHSA-vhxf-7vqr-mrjg
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-f7f6-9jq7-3rqj
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-3q56-9cc2-46j4
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
- Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
- Warn: Project is vulnerable to: GHSA-44fp-w29j-9vj5
- Warn: Project is vulnerable to: GHSA-4pg4-qvpc-4q3h
- Warn: Project is vulnerable to: GHSA-g5hg-p3ph-g8qg
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-gp8f-8m3g-qvj9
- Warn: Project is vulnerable to: GHSA-7m27-7ghc-44w9
- Warn: Project is vulnerable to: GHSA-f82v-jwr5-mffw
- Warn: Project is vulnerable to: GHSA-fr5h-rqp8-mj6g
- Warn: Project is vulnerable to: GHSA-g77x-44xx-532m
- Warn: Project is vulnerable to: GHSA-7gfc-8cq8-jh5f
- Warn: Project is vulnerable to: GHSA-qpjv-v59x-3qc4
- Warn: Project is vulnerable to: GHSA-3h52-269p-cp9r
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-wgrm-67xf-hhpq
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
- Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-pqhp-25j4-6hq9
- Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
- Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
- Warn: Project is vulnerable to: GHSA-3787-6prv-h9w3
- Warn: Project is vulnerable to: GHSA-9f24-jqhm-jfcw
- Warn: Project is vulnerable to: GHSA-9qxr-qj54-h672
- Warn: Project is vulnerable to: GHSA-m4v8-wqvr-p9f7
- Warn: Project is vulnerable to: GHSA-c76h-2ccp-4975
- Warn: Project is vulnerable to: GHSA-cxrh-j4jr-qwg3
- Warn: Project is vulnerable to: GHSA-rcw3-wmx7-cphr
- Warn: Project is vulnerable to: GHSA-963h-3v39-3pqf
- Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986 / GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
- Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
- Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
- Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
- Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
5.7
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More