Skip to content

Using patterns and extensions#

Choose a solution#

Use a pattern when existing components can be composed to solve a recurring interface problem. Patterns explain when and how to combine those components; they do not add a separate API.

Use an extension when you need a reusable solution with its own API, such as Forms, SidebarMenu or TableOfContent. Extensions build on Eufemia components and provide behavior for a larger part of an application.

Available extensions#

Forms for applications#

Forms is reusable components for data input, data display and surrounding layout for simplified user interface creation in React, built on top of base Eufemia components.

AI components#

Building blocks for AI chat experiences, from the welcome screen with suggestions to the conversation, streamed markdown responses and the prompt input.

Payment card#

The Payment Card component is used to display payment card information in a standardized format.

Sidebar menu#

Use SidebarMenu for persistent navigation with sections and nested groups.

TableOfContent#

Help readers navigate long pages with nested section links and a current-section indicator.

Vipps wallet button#

A branded Vipps wallet call-to-action button extension.

Import extensions#

import { SidebarMenu, TableOfContent } from '@dnb/eufemia/extensions'

Extension styles#

Some extensions require additional styles. Follow each extension's import instructions. For example:

import '@dnb/eufemia/extensions/sidebar-menu/style'
import '@dnb/eufemia/extensions/table-of-content/style'

Patterns#

  • Status indicators – combine an icon, a circular background and semantic colors to communicate status.
Suggest an edit