#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
• 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. It doesn't have a 'finished' state. Continuous improvement, removal and addition of content is important if it is to remain relevant as a resource for current and future DNB products and services.

Your input, comments and discussions are all valuable. Reach out to us. And please contribute.