Skip to content

Usage

Get started using the DNB user interface library

The UI Library HTML Elements and UI Components are isolated, ready-to-use elements. They are self-supporting, and will use the styles they need to display.

  • HTML Elements are styled HTML tags
  • UI Components are styled and custom-built HTML elements
  • UI Extensions are styled and functional, but related additions to Eufemia

You can use any of the HTML Elements and UI Components as demonstrated in the documentation with a variety of customization properties.

The Eufemia Repository

The @dnb/eufemia is hosted as a sub package inside the Eufemia Repository on GitHub.

You can also enable notification about upcoming releases.

Installation

To install and save the @dnb/eufemia in your package.json dependencies, run:

NB! React and React-dom are needed as well.

# at time of writing, React version 16 was used
# so consider to run react@16 and react-dom@16
$ npm i @dnb/eufemia react react-dom

Read more in the First Steps section.

Supported Browsers and Platforms

BrowserMinimum version
Chrome109
Chrome Android106
Edge109
Firefox115
Firefox Android115
iOS Safari13.1
Opera95
Safari13.1
Samsung Browser17

Configuration and Browserslist

Eufemia uses the @dnb/browserslist-config configuration for the bundle output, defined in .browserslistrc:

  • extends @dnb/browserslist-config

It only affects the JavaScript bundle output, not the CSS bundle output.

To see exactly which browsers this config supports, paste the following config into the Check compatible browsers tool:

chrome >= 109, firefox >= 115, edge >= 109, opera >= 95, safari >= 13.1, ChromeAndroid >= 106, FirefoxAndroid >= 115, samsung >= 17, iOS >= 13.1