Getting Started#

Welcome to Eufemia — DNB's design system for building accessible, consistent digital experiences. Pick the guided intro or jump straight into the quick start below.

Start Here#

Quick Start#

1. Install the library (React and React DOM are required):

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

2. Import the CSS once in your app entry (theme included):

import '@dnb/eufemia/style'

3. Render your first component:

import { Button } from '@dnb/eufemia'

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

Learn more about importing CSS in Importing Styles.

Choose Your Path#

• First steps and basics
• Quick reference
• Use components
• Use HTML elements
• Styling and CSS setup
• Layout
• Theming and brand customization
• Internationalization (i18n)
• Helpers and tools
• Contribution guide
• Forms, validation and schema

Code Editor Extensions#

Boost your workflow with the Eufemia VS Code extension (spacing, typography and more).

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.