Skip to content
Home

Eufemia quick reference

This is a compact, practical guide for teams who already know they want Eufemia and need the fastest path to decisions and common patterns.

Before you build

  1. Choose the brand theme:
    • ui (default), sbanken, carnegie, or eiendom (theming).
  2. Form-heavy flow?
    • Prefer the Forms extension and Field.* components for validation and structure.
  3. Multi-step journeys?
    • Use Wizard for step navigation and focus management.
  4. Loading states?
  5. Internationalization?
  6. Styling strategy?

Setup

npm i @dnb/eufemia react react-dom
// App entry - import styles once
import '@dnb/eufemia/style'


// Components and other imports
import { Button, Input, Card, Dialog, Icon } from '@dnb/eufemia'
import { H1, H2, P } from '@dnb/eufemia'
import { Flex, Space } from '@dnb/eufemia'
import {
  Form,
  Field,
  Value,
  Wizard,
  Iterate,
  Connectors,
} from '@dnb/eufemia/extensions/forms'
import { ChildrenWithAge } from '@dnb/eufemia/extensions/forms/blocks'
import {
  Provider,
  Theme,
  useTheme,
  useSharedContext,
  useTranslation,
  useMedia,
} from '@dnb/eufemia/shared'

Quick component reference

// Buttons
<Button text="Primary" />
<Button variant="secondary" text="Cancel" />
<Button variant="tertiary" icon="chevron_left" text="Back" />
<Button icon={banking} text="With custom Icon" />


// Inputs
<Input label="My label"  />
<Textarea label="My label" rows={4} />
<Dropdown label="My label" data={options} />
<DatePicker label="My label" show_input />


// Layout
<Flex.Stack>
<Flex.Horizontal>
<Card stack>


// Feedback
<FormStatus state="error">Error message</FormStatus>
<Skeleton show={loading}><Content /></Skeleton>
<Dialog title="Confirm">{content}</Dialog>


// Utility
<CopyOnClick value="text">Copy me</CopyOnClick>
<AriaLive priority="high">{announcement}</AriaLive>

Tip: For tertiary buttons, an icon is recommended. If you need a text-only variant, see Anchor.

Icons

import { Icon } from '@dnb/eufemia'
import { calendar,  } from '@dnb/eufemia/icons'


<Icon icon="bell" />
<Icon icon={calendar} />
<Button icon={calendar} text="Schedule" />

See Icons for the full list and usage guidance.

Key conventions

  1. Prefer Flex and Forms over other layout and form solutions.
  2. Use Field.* components for user input and forms whenever available (all fields).
  3. Follow accessibility basics and avoid font sizes below 14px.
  4. Use the spacing system and Space instead of ad-hoc margins.
  5. Import styles once at the app root (import '@dnb/eufemia/style').
  6. Prefer helpers and tools over custom one-off utilities.
  7. Use HTML elements for semantic structure, even when not using components.
  8. Favor CSS custom properties and spacing helpers over hard-coded values (Spacing, Typography).

Detailed references

Form fields

import { Form, Field } from '@dnb/eufemia/extensions/forms'


function MyApp() {
  return (
    <Form.Handler onSubmit={(data) => {}}>
      <Field.NationalIdentityNumber path="/ssn" required />
      <Field.BankAccountNumber path="/account" required />
      <Field.OrganizationNumber path="/orgNr" />
      <Field.Currency path="/amount" currency="NOK" />
      <Field.Email path="/email" />
      <Field.PhoneNumber path="/phone" />
      <Field.PostalCodeAndCity path="/address" />
      <Field.Upload path="/documents" acceptedFileTypes={['pdf', 'png']} />
      <Value.Email path="/email" />
      <Value.String path="/summary" label="Summary" />
      <Form.SubmitButton />
    </Form.Handler>
  )
}

See Forms for validation, schema, and more fields.

Forms essentials

Standard form pattern

import { Form, Field } from '@dnb/eufemia/extensions/forms'
import { GlobalStatus, Button } from '@dnb/eufemia'


function MyForm() {
  return (
    <Form.Handler onSubmit={async (data) => {}} required>
      <GlobalStatus />
      <Form.Card>
        <Form.MainHeading>Transfer</Form.MainHeading>
        <Field.BankAccountNumber path="/from" label="From" />
        <Field.BankAccountNumber path="/to" label="To" />
        <Field.Currency path="/amount" currency="NOK" />
        <Field.Currency path="/amount" currency="NOK" required={false} />
        <Form.ButtonRow>
          <Form.SubmitButton text="Transfer" />
          <Button variant="secondary" text="Cancel" />
        </Form.ButtonRow>
      </Form.Card>
    </Form.Handler>
  )
}

Form.Section (edit/view mode)

<Form.Section>
  <Form.Section.EditContainer>
    <Field.Name.Last path="/name" />
  </Form.Section.EditContainer>


  <Form.Section.ViewContainer>
    <Value.Name.Last path="/name" />
  </Form.Section.ViewContainer>
</Form.Section>

AI instructions and skills

Eufemia's documentation is optimized for AI assistance. When generating or reviewing code, use the following sources in order of priority.

  • Use the documentation exactly as provided.
  • Gather all required information from the documentation before using it as a reference.
  • Do not make assumptions or infer missing details unless explicitly instructed to do so.

Versioned documentation (preferred)

  1. Install @dnb/eufemia with the package manager used in your project (e.g., npm, yarn, pnpm).
  2. Find where node_modules is located in your project.
  3. Read docs from node_modules/@dnb/eufemia/docs/uilib/usage/first-steps/quick-reference.md.
  4. Follow relative links between markdown files.
  5. Use this content as the primary reference.

Non-versioned documentation

  1. Fetch https://eufemia.dnb.no/uilib/usage/first-steps/quick-reference.md.
  2. Read docs from the fetched markdown file.
  3. Follow absolute URLs for referenced markdown files.
  4. Use this content as a reference only.