---
title: Quick start
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.938Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# 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

- [Components](/web/components/overview/) and [HTML elements](/web/layout-and-typography/elements/) with DNB styles, fonts, and icons.
- [Forms](/web/forms/) and other [extensions](/web/patterns-and-extensions/using-patterns-and-extensions/) for larger reusable solutions.
- Shared [themes and tokens](/web/styling-and-themes/brands-and-dark-mode/), [layout](/web/layout-and-typography/layout/), and [accessibility guidance](/web/accessibility/).
- Versioned [releases and upgrade guides](/web/releases-and-upgrades/) to help applications adopt changes.

### 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](/web/get-started/design-for-web/) for the maintained design resources.

## Installation

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

```bash
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:

```tsx
import '@dnb/eufemia/style'
```

For other brands, scoped styles, or smaller CSS bundles, see [CSS setup and structure](/web/styling-and-themes/css/). Check [requirements and browser support](/web/get-started/requirements/) before choosing your application setup.

## Render a component

```tsx
import { Button } from '@dnb/eufemia'

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


```tsx
render(<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:

```tsx
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](/web/ai-tools-and-resources/module-formats/) for CommonJS, server rendering, or scripts without an application build.

## Events

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


```tsx
render(<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`](/web/components/drawer/properties/) on a `Drawer`, or the `preventNavigation` function that [`onStepChange`](/web/forms/Wizard/Container/events/) gives you on a `Wizard.Container`.

Fields in [Eufemia Forms](/web/forms/) merge the same way. See [how given attributes are merged](/web/forms/about-fields/#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](/web/styling-and-themes/brands-and-dark-mode/).
2. Use [Forms](/web/forms/) for data input, validation, and read-only values. Start with [Build your first form](/web/forms/getting-started/).
3. Use [Wizard](/web/forms/Wizard/) for journeys with several steps.
4. Plan [loading states](/web/components/skeleton/) and [localization](/web/styling-and-themes/configuration/localization/).
5. Choose [global or isolated styles](/web/styling-and-themes/css/style-isolation/) for the application around Eufemia.

## Key conventions

- Use [Flex](/web/layout-and-typography/layout/flex/), [Space](/web/layout-and-typography/layout/space/), and the [spacing system](/web/layout-and-typography/spacing/) for consistent layout.
- Prefer `Field.*` for user input, `Value.*` for read-only content, and [HTML elements](/web/layout-and-typography/elements/) for semantic text.
- Use [semantic tokens](/web/styling-and-themes/design-tokens/) and [typography helpers](/web/layout-and-typography/typography/css-reference/) before adding custom values.
- Keep [keyboard focus, labels, and error messages accessible](/web/accessibility/).
- Test browser zoom, enlarged default fonts, narrow layouts, and the devices you support. Use `rem` for scalable dimensions.
- Reuse [shared utilities](/web/ai-tools-and-resources/utilities/) for common behavior.

## Forms essentials

- [Form.Handler](/web/forms/Form/Handler/) handles submission and validation. [GlobalStatus](/web/components/global-status/) can summarize errors.
- Use [Form.Outlet](/web/forms/Form/Outlet/) with a shared `formHandlerId` when a field or form control lives outside the handler subtree.
- Use [Form.Section](/web/forms/Form/Section/) for edit and view modes.
- Most fields have a matching value component. [Value.SummaryList](/web/forms/Value/SummaryList/) builds a read-only summary.
- Use Zod or [AJV JSON Schema](/web/forms/Connectors/) when validation comes from a schema.

## Continue

- Follow the [guided introduction](/web/get-started/guided-introduction/) for a walkthrough.
- Browse [components](/web/components/overview/), [layout](/web/layout-and-typography/layout/), and [Web typography](/web/layout-and-typography/typography/).
- Set up [developer tools](/web/ai-tools-and-resources/developer-tools/) for your editor and workflow.
- Follow [releases and upgrades](/web/releases-and-upgrades/) and [watch the repository](/web/get-started/requirements/#the-eufemia-repository) for updates.
- For AI assistance, install [Agent skills](/web/ai-tools-and-resources/ai/ai-skills/) and connect the [MCP server](/web/ai-tools-and-resources/ai/mcp-universe/).


# Welcome Info

## Please contribute

Eufemia is a [living design system](/about/how-eufemia-evolves) 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](/about/contact) and [contribute](/web/contribute).