Skip to content
Home

Importing the CSS

To include the packages dnb-ui-core, ui-theme-basis and ui-theme-components in a Node.js based environment (given you have a CSS loader in place), do this:

// This includes the `dnb-ui-core`, `ui-theme-basis` and `ui-theme-components`
import '@dnb/eufemia/style'

Gatsby Plugin

The gatsby-plugin-eufemia-theme-handler plugin makes it easy to add the needed styles and provides also a runtime style switch mechanism.

Importing styles from within CSS

@import url('@dnb/eufemia/style/dnb-ui-core.css');
@import url('@dnb/eufemia/style/themes/theme-ui/ui-theme-components.css');
@import url('@dnb/eufemia/style/themes/theme-ui/ui-theme-basis.css');

Legacy import

Read more about how to deal with existing styles.

// NB: needs a wrapper class: ".dnb-core-style"
import '@dnb/eufemia/style/basis'
import '@dnb/eufemia/style/themes/ui'

Single Component only

It is possible to import a single CSS Style of a single component at once:

import '@dnb/eufemia/style/core'
import '@dnb/eufemia/style/themes/ui'


// Imports only the Button CSS and Main DNB Theme
import '@dnb/eufemia/components/button/style'
import '@dnb/eufemia/components/button/style/themes/ui'