EBRAINS UI Ecosystem
The ebrains-ui-ecosystem is an advanced way for managing the design system, UI components, and applications across EBRAINS products. It leverages the capabilities of the NX monorepo build system, which facilitates efficient management of multiple apps and libraries within the repository, enabling code sharing and collaboration.
The idea behind the ui-ecosystem monorepo is to centralize all the essential information and resources used across the organization, making it easy to find and scale. By bringing together design tokens, style guides, component libraries, and consumer applications in one repository, teams have a single source of truth that promotes consistency and collaboration. This unified approach not only streamlines the development process but also enables faster innovation, as every asset is readily available and maintained in one place.
Additionally, thanks to the robust capabilities of the monorepo—such as efficient dependency management and automated release processes—releases and deployments become super simple. This means that updates can be rolled out quickly and reliably across all EBRAINS products, ensuring that teams always work with the latest standards and tools.
Getting Started
A comprehensive hands-on tutorial that teaches you to create a working React app in the ecosystem. You’ll learn:
- Setting up the monorepo locally
- Using NX Console and CLI to generate apps
- Running development servers with hot reload
- Building production-ready applications
- Following EBRAINS development conventions
Time: 45-60 minutes | Level: Beginner
Add the EBRAINS Design System to Your App
Transform your basic app into a polished EBRAINS application using the official design system. You’ll learn:
- Installing and configuring the design system
- Using professional UI components (buttons, cards, forms)
- Applying EBRAINS branding and design tokens
- Both monorepo and external project approaches
Time: 30-40 minutes | Level: Beginner
Configure Tailwind CSS with Design Tokens
Learn to use utility-first CSS with EBRAINS design tokens for rapid UI development. You’ll learn:
- Setting up Tailwind using the factory configuration
- Using EBRAINS color, typography, and spacing tokens
- Building responsive layouts with utility classes
- Both monorepo and external project approaches
Time: 20-30 minutes | Level: Beginner
Quick References
How to Integrate the Design System - Framework-specific integration guide
Configure Your Application - Environment variables and settings
Technical References
Tailwind CSS Class Reference - Complete list of EBRAINS Tailwind utilities
Tailwind Factory API - Configuration function documentation
Libraries
Consumer Applications
Other Types
The ebrains-ui-monorepo can efficiently handle any kind of tool or initiative, from libraris, APIs to advanced workflows.