UI Components

The EBRAINS Design System provides 44+ production-ready web components built with Stencil. They are framework-agnostic and work with any JavaScript framework or plain HTML.

Load the Module

Integrating the components into a project with or without a JavaScript framework is straightforward. Add the following to your <head>:

Under the hood, this:

Imports the loader module from the Stencil-generated CDN package
Registers custom elements with the browser using customElements.define()
Lazy-loads components — implementation code is only fetched when a component is first used
Optimizes performance — fast startup with on-demand loading

Load Variables and Styles

To use the design tokens (colors, breakpoints, typography), add the stylesheet:

This loads all CSS custom properties and utility classes. It also includes the IBM Plex fonts, so no separate font loading is needed.

For variables only (without utility classes):

Install via NPM (vanilla JS / framework-agnostic)

For plain HTML/JS or any framework where you’d rather use the raw eds-* custom elements directly:

Then in your application entry point:

Framework Integration

For React, Vue, and Angular projects we publish dedicated wrapper packages that expose the components as idiomatic, fully-typed framework components. The wrappers self-register the underlying custom elements on import — you do not need to call defineCustomElements() yourself.

React

Install the React wrapper alongside the assets package:

Import the components and styles where you need them — the wrapper handles custom-element registration internally:

import { EdsButton, EdsAlert } from '@ebrains/react';
import '@ebrains/assets/styles/output.css';

function App() {
  return (
    <>
      <EdsButton label="Click me" intent="primary" />
      <EdsAlert intent="info" message="Welcome to EBRAINS." />
    </>
  );
}

Vue.js

Install the Vue wrapper:

Use the wrapped components directly in your single-file components. No app.config.compilerOptions.isCustomElement configuration is required — you import the wrapped Vue components, not the raw eds-* tags:

<script setup>
import { EdsButton, EdsAlert } from '@ebrains/vue';
import '@ebrains/assets/styles/output.css';
</script>

<template>
  <EdsButton label="Click me" intent="primary" />
  <EdsAlert intent="info" message="Welcome to EBRAINS." />
</template>

Angular

Install the Angular wrapper (Angular 18+):

Components are exported as standalone Angular components and self-register the underlying custom elements — no CUSTOM_ELEMENTS_SCHEMA or NgModule wiring needed:

import { Component } from '@angular/core';
import { EdsButton, EdsAlert } from '@ebrains/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [EdsButton, EdsAlert],
  templateUrl: './app.component.html'
})
export class AppComponent {}

The matching template:

<eds-button label="Click me" intent="primary"></eds-button>
<eds-alert intent="info" message="Welcome to EBRAINS."></eds-alert>

Load the design-system styles globally (e.g., in src/styles.css):