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.
"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
Add the EDS variable font stylesheet to your HTML <head>:
<link rel="stylesheet" href="https://cdn.eds.equinor.com/font/eds-uprights-vf.css" />
This stylesheet loads both Equinor and Inter. If you use EDS 2.0 (next) components, it is required — 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 current stable API and the new EDS 2.0 (next) components.
Current 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>
)
}
EDS 2.0 components
New components are available under the /next export. They use vanilla CSS with design tokens instead of styled-components:
import { Button } from '@equinor/eds-core-react/next'
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.
Versioning
"EDS 2.0" is the name of the next generation of the design system. Its components currently live in beta under the /next entry point of the eds-core-react package, alongside the stable EDS 1 components. The package itself is on version 2.x today, so an installed eds-core-react@2.x matching "EDS 2.0" is also a coincidence.
When EDS 2.0 stabilises, the components move out of /next and EDS 1 is deprecated. Because removing EDS 1 is a breaking change, the package bumps to eds-core-react@3.0.0.
The numbers line up by coincidence: "2.0" is the design system name, and "3.0.0" is the semver consequence of removing EDS 1. There is no "EDS 3.0" — the package version and the design system name are separate things.
Design tokens
For custom styling, use EDS design tokens to stay consistent with the system.
CSS variables (recommended)
@import '@equinor/eds-tokens/css/variables';
.my-card {
color: var(--eds-color-text-neutral-strong);
padding: var(--eds-spacing-md);
border-radius: var(--eds-corner-radius-rounded);
}
npm install @equinor/eds-tokens
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. EDS 2.0 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.