Get Started with React
Follow these steps to get started with React components. It is recommended that you also read about CSS.
1. Install the packages
If you are not creating your own theme you can get a default theme from @digdir/designsystemet-css/theme.
You can easily create your own theme later.
Typescript
If you are using Typescript, make sure you have typescript >= 3.8 and install @digdir/designsystemet-types:
2. Font
The components are designed and developed with the Inter font, so variations may occur if you use a different font.
If you choose to install the font in a different way, remember to include the font weights 400, 500 and 600.
Add the Inter font (optional)
Add the <link> tag below to <head>, and set the font-family to Inter in your global css file.
HTML
You can use this code to add the font:
CSS
We strongly recommend that you add the following to your global css file.
font-feature-settings adds a tail to lowercase Ls.
3. Use a React component
@digdir/designsystemet-css and @digdir/designsystemet-css/theme must only be imported once in the application.
Extras
Polyfill
The design system uses popover in some components. This api is classified as Baseline: Newly available as of April 2024, when Firefox was the last browser to add it. In some cases, you may find that users are locked to older browser versions for various reasons, and then it may be appropriate to add a polyfill to ensure that popover works for everyone.