---
title: Requirements and browser support
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.939Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Requirements and browser support

Aside from the peer dependencies, there are no specific technical requirements, except that it is highly recommended to use a compiling process with [tree shaking](/web/ai-tools-and-resources/module-formats/) in place.

## Usage

Eufemia (`@dnb/eufemia`) can be used within a UMD, ESM, CJS, or TypeScript environment. The purpose is to use it on top of (or inside) modern JavaScript frontend frameworks and setups. However, we strongly recommend using Eufemia with a **React stack**, as this makes including the Eufemia tools and components most productive. All the component internal states are handled with React to keep only the most necessary elements in the DOM (HTML elements and event bindings).

## The hard part of a living design system

The hard part of a [living design system](/about/how-eufemia-evolves), like Eufemia, is avoiding the creation of black holes and choosing ways that make **maintainability of user experience** hard and complex. To address this challenge and gain more insight, read on about [**maintainability**](/web/development-guidelines/maintainable-integrations).

## React

Why React is a good choice:

- Declarative and functional
- Immutable structure
- Lightweight
- Centralization of code that should work in context (concepts like writing code like **reading a book**)
- Can be used with a JAM stack, CSR, and SSR (SPA) using the same code base (App)
- Flexible frontend stack to create the best user experience, depending on the solution and its needs
- Can be tailored to different conventions and guidelines

## Using the styles

This library works perfectly with any styling techniques, such as **Styled Components** ([Emotion](https://emotion.sh)), CSS Modules, or SCSS/LESS. You simply consume **ready-to-use CSS files** and CSS Custom Properties (CSS variables).

## License

The `@dnb/eufemia` package is intended for internal DNB development only. Make sure you comply with the [license](/about/license).


## The Eufemia Repository

The `@dnb/eufemia` is hosted as a sub-package inside the [<Icon icon={EufemiaLogo} size="default" /> **Eufemia Repository**](https://github.com/dnbexperience/eufemia) on GitHub.

You can also enable [<Icon icon={GithubLogo} size="default" />notification about upcoming releases](https://help.github.com/articles/watching-and-unwatching-releases-for-a-repository/).


## Public assets

Use the [Asset CDN](/web/ai-tools-and-resources/asset-cdn/) when a web, native, or external consumer needs public URLs for Eufemia fonts, icons, images, flags, browser assets, or company logos.

## Supported Browsers and Platforms


```tsx
render(<Table size="small" outline>
      <thead>
        <Tr>
          <Th style={{
        width: '30%'
      }}>
            Browser
          </Th>
          <Th>Minimum version</Th>
        </Tr>
      </thead>

      <tbody>
        {supportedBrowsers.map((browser, key) => {
      return <Tr key={key}>
              <Td>{browser.name}</Td>
              <Td>
                <Code>{browser.minimumVersion}</Code>
              </Td>
            </Tr>;
    })}
      </tbody>
    </Table>)
```


See the [DNB browser support report](https://browsers-support-report.pages.dnb.ghe.com/) for more information (DNB sign-in required).

### Configuration and Browserslist

Eufemia uses the [@dnb/browserslist-config](https://github.com/dnbexperience/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](https://browsersl.ist/#q=defaults+and+supports+es6-module) tool:


```tsx
render(<Space element="pre">
      <Code>
        <Space innerSpace>
          <CopyOnClick>
            {config.map(browser => {
          return browser;
        }).join(',\n')}
          </CopyOnClick>
        </Space>
      </Code>
    </Space>)
```