Skip to main content
Version: Beta

Getting started with development

Getting started with development

Install the React component library, load fonts, and start building with EDS components and design tokens.

Prerequisites: Node.js 24+, React 18+, TypeScript 5.9+ (recommended)

Install

npm install @equinor/eds-core-react styled-components
# or
pnpm add @equinor/eds-core-react styled-components

styled-components@6 is a peer dependency of eds-core-react.

note

The versions are named after their release status. Latest is what a plain npm install gives you, and Beta is the 3.0.0 beta. See Versioning for which package versions each one is.

Load fonts​

Add the EDS variable font stylesheet to your HTML <head>:

<link rel="stylesheet" href="https://cdn.eds.equinor.com/font/eds-uprights-vf.css" />
tip

This stylesheet loads both Equinor and Inter. If you use the Beta (next) components, it is required, because the older equinor-font.css only includes Equinor and will cause fallback fonts. See Typography for details.

Use components

EDS has two component sets: the Latest components and the Beta (next) components.

Latest components​

import { Button, Typography } from '@equinor/eds-core-react'

function App() {
  return (
    <div>
      <Typography variant="h1">Welcome to EDS</Typography>
      <Button variant="contained">Get Started</Button>
    </div>
  )
}

Beta components​

New components live under the /next export, published on the beta dist-tag. They use vanilla CSS with design tokens instead of styled-components:

npm install @equinor/eds-core-react@beta
import { Button } from '@equinor/eds-core-react/next'
import '@equinor/eds-core-react/next/index.css'
import '@equinor/eds-tokens/css/variables'

function App() {
  return <Button variant="primary">Get Started</Button>
}

See the component overview for what's available in each set.

note

/next ships only on the beta dist-tag, so the plain npm install @equinor/eds-core-react above does not include it. Browsing the components in Storybook does not enable them either.

Beta here means safe to adopt alongside the Latest components, not "wait and see": Latest stays supported until 3.0.0 is released, and mixing both in one application is expected. The API may still change in small ways, and the token setup for /next is being reworked. See About the beta for what beta means.

Versioning​

The docs and Storybook name the versions after their release status, the same as the latest and beta dist-tags on npm:

LatestBeta
@equinor/eds-core-react2.x3.0.0 beta, with the components in /next
@equinor/eds-tokens2.x3.0.0 beta
Installnpm install @equinor/eds-core-reactnpm install @equinor/eds-core-react@beta
StorybookThe top-level sectionsThe Beta section

The other packages, such as @equinor/eds-icons, are not split into Latest and Beta.

Removing the Latest components is a breaking change, so Beta becomes eds-core-react@3.0.0, in three steps:

  1. Beta (3.0.0-beta.N, today): the components live under /next. Small breaking changes can still happen, and each one is listed in the changelog.
  2. Release candidate (3.0.0-rc.N): the components move out of /next and the 2.x components are removed. The API is frozen and only fixes go in, so this is the time to test 3.0.0 in your application. Release candidates are published on the rc dist-tag.
  3. Stable (3.0.0): the last release candidate is released as stable, and Latest moves to 3.x.

@equinor/eds-tokens goes through the same steps at the same time.

Design tokens

For custom styling, use EDS design tokens to stay consistent with the system.

@import '@equinor/eds-tokens/css/variables';

.my-card {
  color: var(--eds-color-text-neutral-strong);
  padding: var(--eds-spacing-vertical-md) var(--eds-spacing-horizontal-md);
  border-radius: var(--eds-spacing-border-radius-rounded);
}
npm install @equinor/eds-tokens
note

The token structure is being replaced. The CSS variables are the supported option today, but the variable names will change in the next major release of @equinor/eds-tokens, so keep direct variable references few and centralised. The older tokens JavaScript object is deprecated and should not be used in new code. See the package README for details.

Troubleshooting

Missing fonts: if components render in a generic sans-serif, check that the eds-uprights-vf.css stylesheet is loaded. The Beta components require Inter, which is only in the variable font stylesheet.

Peer dependency warnings: eds-core-react expects react@^18 || ^19, react-dom@^18 || ^19, and styled-components@^6. Check versions with npm ls react styled-components.

TypeScript version: EDS requires 5.9+. If you see type errors, check your tsconfig.json targets a compatible version.

Need help?

The support page has the #eds-design-system Slack channel, email and GitHub issues.

Visit support