#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?
   • Plan for Skeleton or ProgressIndicator.
5. Internationalization?
   • Plan for localization and i18n.
6. Styling strategy?
   • Decide how to import styles and whether you need style isolation.

#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

• Components
• Forms extension
• Layout
• Styling and theming
• Typography
• Colors
• Theming
• Icons

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 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.