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
| Browser | Minimum version |
|---|---|
| Chrome | 109 |
| Chrome Android | 106 |
| Edge | 109 |
| Firefox | 115 |
| Firefox Android | 115 |
| iOS Safari | 13.1 |
| Opera | 95 |
| Safari | 13.1 |
| Samsung Browser | 17 |
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