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
Then import in your application: