Get started with React
Follow these steps to get started with React components.
1. Install the packages
Typescript
If you are using Typescript, make sure you have typescript >= 3.8 in devDependencies:
2. Font
You are free to use any font family with the components.
The components are designed and developed with the Inter font, so variations may occur if you use a different font.
Add the Inter font (optional)
Add the <link> tag in <head>, and set the font-family to Inter in your global css file.
font-feature-settings adds a tail to lowercase Ls.
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.
If you choose to install the font in a different way, remember to include the font weights 400, 500 and 600.
3. 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.
4. Use a React component
@digdir/designsystemet-theme and @digdir/designsystemet-css must only be imported once in the application.