How to Integrate the EBRAINS Design System

This guide provides quick reference instructions for integrating the EBRAINS Design System into your web application, whether it’s in the monorepo or an external project.

Learning the design system? Try the Add Design System to Your App tutorial for a hands-on walkthrough. This guide is a quick reference for experienced developers.

Choose Your Integration Method

Method 1: Monorepo Projects

Use when: Your app is in ebrains-ui-ecosystem monorepo

Packages available:

• @ebrains/react - React components
• @ebrains/vue - Vue components
• @ebrains/angular - Angular components
• @ebrains/components - Web Components
• @ebrains/assets - CSS framework and design tokens
• @ebrains/svgs - Icon library

No installation needed - packages are already available in the workspace.

Method 2: External Projects via npm

Use when: Your app is in a separate repository

Install packages:

Quick Start by Framework

React

Vue

Angular

Vanilla JavaScript

Component Documentation

For complete component reference, props, examples, and usage guidelines:

• Component Library - 40+ components with detailed documentation
• Storybook - Interactive component playground
• Design Tokens - Colors, spacing, typography tokens
• Package Reference - NPM package documentation

Next Steps

• Add Design System Tutorial - Hands-on walkthrough with complete examples
• Build Your First App - Create React app in the ecosystem