The If Design System React library provides front-end developers and engineers a collection of reusable React components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work




  • A decent bash system. For example: iTerm, Terminal in VSCode, Linux Bash, Ubuntu Bash through Windows WSL2 etc
  • Node >=14.17.3 and npm >=6.14.4

To be able to install packages for If Design System, you are required to setup your environment with credentials. Please follow this guide before continuing

Using npm:

// Example with the button component
npm i --save @ids-react/button

Or yarn:

// Example with the button component
yarn add @ids-react/button

Getting started

  • You can use whichever bundler you like
  • Components are to be installed individually, we have no bundle for the react components yet

Note: there isn't a bundle of ids-react, you can install components only individually for now.


Please use sass package instead of node-sass or dart-sass, as the latter ones do not support some of the sass features which are used in ids-core.



config: {module: {rules: {test: /\.scss$/,
            { loader: 'css-loader', options: { modules: true } },
        path.resolve(__dirname, '../'),



import postcss from 'rollup-plugin-postcss';

export default [
        input: '…',
        output: [],
external: [],
plugins: [postcss({
          use: ['scss'],
          modules: true,


If you experience any issues while getting set up with the libraries, please head over to our MS Teams channel . We're always glad to help!


Table of Contents

Edit this section, Opens in new window
Contact us, Opens in new window