Skip to content

Quick start#

The DNB UI library contains ready-to-use components, HTML elements, and extensions for Web applications. Use this guide to understand the building blocks, install Eufemia, and render your first component.

What the library provides#

Design and development#

Eufemia connects design and development through shared components, naming, spacing, and tokens. Use the same foundations in Figma and code so handovers and implemented interfaces stay aligned. See Figma setup for the maintained design resources.

Installation#

Install Eufemia with React and React DOM using your project's package manager:

npm i @dnb/eufemia react react-dom
# or
yarn add @dnb/eufemia react react-dom
# or
pnpm add @dnb/eufemia react react-dom

Import styles once in your application entry. The default import includes the DNB theme, components, and Forms styles:

import '@dnb/eufemia/style'

For other brands, scoped styles, or smaller CSS bundles, see CSS setup and structure. Check requirements and browser support before choosing your application setup.

Render a component#

import { Button } from '@dnb/eufemia'


export default function App() {
  return (
    <Button text="Hello Eufemia" onClick={() => console.log('clicked')} />
  )
}
<Button text="Basic Button" />

Imports and TypeScript#

The default package uses ESM and supports tree shaking. Import components, elements, and their TypeScript types from the public package. Import Forms and icons from their own entries:

import { Button, Input, H1, P, Flex } from '@dnb/eufemia'
import { Form, Field, Value, Wizard } from '@dnb/eufemia/extensions/forms'
import { bell_medium } from '@dnb/eufemia/icons'

You can also use component entries such as @dnb/eufemia/components/button. See module formats, SSR, and bundles for CommonJS, server rendering, or scripts without an application build.

Events#

Component event handlers receive the values documented on each component's Events tab:

<Button text="Button" onClick={() => console.log('click')} />

How given props are merged#

Eufemia components apply the props you give them on top of the ones they set themselves, either directly or through a prop object such as closeButtonProps. When you set the same prop as the component, the two are combined instead of yours replacing the component's:

  • An event handler is called together with the component's own handler for the same event, so the component keeps doing what it does. A Drawer still closes, and a Wizard.NextButton still moves to the next step.
  • A className is added to the component's own classes.
  • A style is merged with the component's own, where your values win.
  • For every other prop, your value wins. Avoid setting what the component controls itself, and use the property it offers for it instead.

To keep a component from doing what it normally does, use the property it offers for that, such as preventClose on a Drawer, or the preventNavigation function that onStepChange gives you on a Wizard.Container.

Fields in Eufemia Forms merge the same way. See how given attributes are merged for what that means for a field's value and validation.

Interaction states#

Components provide hover, active, focus, and disabled states. Use their documented properties and theme tokens rather than reproducing those states in application CSS.

Before you build#

  1. Choose a brand and color scheme.
  2. Use Forms for data input, validation, and read-only values. Start with Build your first form.
  3. Use Wizard for journeys with several steps.
  4. Plan loading states and localization.
  5. Choose global or isolated styles for the application around Eufemia.

Key conventions#

Forms essentials#

Continue#

Please contribute#

Eufemia is a living design system that does not have a "finished" state. Continuous improvement, removal, and addition of content are essential to keeping it relevant as a resource for current and future DNB products and services.

Your input, comments, and discussions are all valuable. Please reach out to us and contribute.

Suggest an edit