Skip to main content
Version: 2.0.0-beta

Getting started with development

Welcome to building with EDS! Get production-ready React components, full TypeScript support, and everything you need to create consistent, accessible applications.

Prerequisites: Node.js 22+, React 19+, TypeScript 5.9+ (recommended)
Time to get started: 10-15 minutes

Getting Started​

Install the core React components:

npm install @equinor/eds-core-react
# or
yarn add @equinor/eds-core-react
note

"EDS 2.0" is the design system name; eds-core-react is the package version (semver). They are not the same — see Versioning for the relationship.

Load fonts​

EDS components use the Equinor font family. EDS 2.0 (next) components additionally require Inter. Add the EDS variable font stylesheet to your HTML <head> to load both:

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

If you are using EDS 2.0 (next) components, this stylesheet is required. The older equinor-font.css only includes Equinor and will cause UI components (Button, TextField, etc.) to fall back to a generic sans-serif. See Typography for details.

Use components​

Import and use components in your React application:

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>
  )
}

For consistent styling, install and use design tokens:

npm install @equinor/eds-tokens

Import the CSS variables and use them in your styles:

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

.my-component {
  background-color: var(--eds-color-bg-neutral-surface);
  color: var(--eds-color-text-neutral-strong);
}
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.

Key Features​

TypeScript support: Full autocomplete, type checking, and inline documentation included.

Accessibility built-in: Every component follows WCAG 2.1 AA standards with semantic HTML structure, keyboard navigation, proper colour contrast, and screen reader compatibility.

Complete documentation: Each component includes prop definitions, TypeScript types, interactive examples, and accessibility considerations.

Common Issues​

TypeScript errors: Check import paths and ensure TypeScript version is 5.9+
Build issues: Verify peer dependencies match requirements
Runtime problems: Confirm styled-components version compatibility

Need help? Visit our Support page for GitHub repository, community discussions, and office hours.