BI Web components React

All components can be seen at designsystem.bi.no.

This is the React equivalent of bi-web-components

Get started

NPM

Install the React components and the required CSS tokens and fonts: npm i bi-web-components-react @bi-digital/css

Import a components:

import { BiButton } from 'bi-web-components-react';

Then add the styles, either in a CSS-file:

@import '@bi-digital/css';

Or in jsx/tsx:

import '@bi-digital/css';

The fonts and tokens from the @bi-digital/css package is required.

How can I include only the fonts and tokens?

The @bi-digital/css package allows you to only import the styles that you want. For example:

@import '@bi-digital/css/dist/fonts.css';
@import '@bi-digital/css/dist/tokens.css';

CDN

In your head-section in your html, import the following script:

<script type="module" src="https://cdn.jsdelivr.net/npm/bi-web-components-react@latest/dist/index.min.js"></script>
<link type="stylesheet" src="https://cdn.jsdelivr.net/npm/@bi-digital/css@latest/dist/index.min.css" />

We recommend replacing latest with a specific version to avoid errors when the library is updated.