Skip to content

Usage

Get started using the DNB user interface library

The UI library's HTML elements and UI components are isolated, ready-to-use building blocks. They are self-contained and include the styles needed for proper display.

  • HTML elements are styled HTML tags
  • UI components are styled and custom-built HTML elements
  • UI extensions are styled, functional additions to Eufemia

You can use any of the HTML elements and UI components as demonstrated in the documentation, with various customization properties available.

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 @dnb/eufemia in your package.json dependencies, run:

Note: React and React DOM are also required.

# React version 16 is currently used
# You may want to specify 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 bundle output, defined in .browserslistrc:

  • extends @dnb/browserslist-config

This configuration only affects the JavaScript bundle output, not the CSS bundle output.

To see 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