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'

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#

See Forms for validation, schema, and more fields.

Forms essentials#

  • Start with Getting started for forms patterns, validation, and data handling.
  • Use Form.Handler for submit/validation and GlobalStatus for error summaries.
  • For rendering fields or form UI outside the handler subtree, use Form.Outlet together with a shared form handler id (formHandlerId).
  • For multi-step flows, use Wizard.
  • For edit/view modes, use Form.Section.
  • Prefer feature fields (e.g. Field.*) when available.
  • For read-only outputs, use Value components (e.g. Value.*).
  • Most Field.* components have a corresponding Value.* component; you can mix fields and values in the same form.
  • For read-only summaries, use Value.SummaryList.
  • Validation schemas can be provided via Zod or AJV JSON Schema.

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.
Suggest an edit