@havforsk/react-components

A React component library based on Designsystemet by DigDir, with custom components tailored for internal use.

Installation

npm install @havforsk/react-components

Getting Started

1. Import a theme CSS file

You must import one of the theme CSS files for the components to work correctly. Pick the theme for your application:

@import "@havforsk/react-components/hi.css";
/* or */
@import "@havforsk/react-components/mareano.css";

This applies the HI or Mareano theme to components imported from @digdir/designsystemet-react.

Tailwind configs based on the themes are also available, and can be imported in addition:

@import "@havforsk/react-components/hi.tailwind.css";
/* or */
@import "@havforsk/react-components/mareano.tailwind.css";

[!NOTE] You may see the following warning in the console:

[vite:css][postcss] @charset must precede all other statements

This is harmless and caused by a bug in designsystemet. A workaround is to import @digdir/designsystemet-css and @havforsk/react-components/hi.css in main.tsx instead of in CSS.

Font

The themes specify the Lato font, but you have to load it yourself. To load and apply it, add the following to your CSS:

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

body {
	font-family: "Lato", sans-serif;
}

2. Use components

Import componets from DigDir's Designsystemet:

import { Button } from "@digdir/designsystemet-react";

Import custom components from this library:

import { Stepper } from "@havforsk/react-components";

Components

Stepper

A responsive multi-step progress indicator. It uses a compound component pattern — wrap <Stepper.Step> elements inside <Stepper>. Steps can be in pending, current, or completed state. On small screens the component collapses into a compact view showing only the current step with a circular progress ring.

import { Stepper } from "@havforsk/react-components";

<Stepper stepText="Step">
  <Stepper.Step stepNumber={1} state="completed">Personal info</Stepper.Step>
  <Stepper.Step stepNumber={2} state="current">Payment</Stepper.Step>
  <Stepper.Step stepNumber={3} state="pending">Confirmation</Stepper.Step>
</Stepper>

For full documentation and live examples of all components, see https://storybook.hi.no.

Legacy Components

The older components, which are not based on Designsystemet, are still available under a separate export. These should not be used. If you come across them in your application, replace them with a component from either @digdir/designsystemet-react or @havforsk/react-components. Although we do recognize there aren't yet replacements for everything.

@import "@havforsk/react-components/old/index.css";

import { Something } from "@havforsk/react-components/old";

Exports

| Import path | Description | | ------------------------------------------------- | -------------------------- | | @havforsk/react-components | Components | | @havforsk/react-components/hi.css | HI theme CSS | | @havforsk/react-components/mareano.css | Mareano theme CSS | | @havforsk/react-components/hi.tailwind.css | HI Tailwind theme CSS | | @havforsk/react-components/mareano.tailwind.css | Mareano Tailwind theme CSS | | @havforsk/react-components/old | Legacy components | | @havforsk/react-components/old/index.css | Legacy component styles |

Peer Dependencies

This package has peer dependencies on:

• @digdir/designsystemet
• @digdir/designsystemet-react
• @digdir/designsystemet-css

These are automatically installed via npm, but you can control the versions manually if needed.

Development

Build process

The full build runs npm run build, which does the following:

1. prebuild — cleans build artifacts and runs build-tokens.
2. build (tsup) — bundles TypeScript components from src/ into dist/.
3. postbuild — copies CSS files, type augmentations, and legacy component styles into dist/. Adds a type reference to the component declarations.

CSS and token files in src/ are not source files — they are generated by build-tokens (run automatically as part of prebuild). That script does:

1. tokens create — generates design token JSON files in design-tokens/ from the config.
2. tokens build — compiles the tokens into CSS and Tailwind theme files in design-tokens-build/.
3. Copy to src/ — copies the generated outputs into src/ for local development.

npm run build  # produces dist/ (including token generation)

Syncing design tokens to Figma

Using the Figma plugin Tokens Studio (pro license not necessary), you can sync the design-tokens/ directory from this repo into a copy of the Designsystemet Core UI Kit. Our copy is here. For more information, see Creating your own theme.

To connect Tokens Studio to our GitLab repo, use the following settings:

| Setting | Value | | --- | --- | | Name | react-components (or whatever you prefer) | | Personal Access Token | Create one at https://git.imr.no/-/user_settings/personal_access_tokens with API scope | | Repository owner | digital-utvikling/npm-packages/npm-packages | | Branch | main (can be changed for development) | | Token storage location | packages/react-components/design-tokens | | Base URL | https://git.imr.no |

Testing the library

You can use the component library without having to publish it to npmjs. To do so, run npm run build && npm pack. This results in a tarball havforsk-react-components-<version>.tar.gz. This can be installed into any local project with npm install /path/to/tarball.tar.gz.

Storybook

npm run storybook