EOS UIGetting started
Install EOS Web Components and use them from any supported framework.
Installation
Install the package with your preferred package manager:
npm install @eosjs/ui
yarn add @eosjs/ui
pnpm add @eosjs/uiSelective imports
Import the components used by each page. Entries register their elements and export component classes and public types:
import '@eosjs/ui/button';
import '@eosjs/ui/image';
import '@eosjs/ui/carousel';
import type { EosImageGroupItem } from '@eosjs/ui/image-group';
import type { CardStackRenderer } from '@eosjs/ui/card-stack';| Entry | Automatically registered |
|---|---|
@eosjs/ui/button | Button |
@eosjs/ui/card-stack | CardStack |
@eosjs/ui/carousel | Carousel, ProgressBar |
@eosjs/ui/image | Image |
@eosjs/ui/image-group | ImageGroup, Image |
@eosjs/ui/progress-bar | ProgressBar |
@eosjs/ui/scrollbar | Scrollbar |
Carousel and ImageGroup register internal dependencies. Slotted components must still be imported by the caller. Repeated imports and mixing selective imports with the root entry do not register elements twice. @eosjs/ui/config exports configuration without loading components.
import '@eosjs/ui' remains compatible and registers every component. Type-only imports do not register elements; @eosjs/ui/jsx-types is unchanged. Runtime entries are safe to import without a browser; element creation and rendering still happen on the client.
These entries have not been published yet. Use a built, locally linked package for now; existing npm releases do not include the new entries.
Framework integration
React
import { useEffect, useRef } from "react";
import "@eosjs/ui";
export function App() {
const buttonRef = useRef<HTMLElement>(null);
useEffect(() => {
const button = buttonRef.current;
const onClick = (event: Event) => console.log("Clicked:", event);
button?.addEventListener("click", onClick);
return () => button?.removeEventListener("click", onClick);
}, []);
return <eos-button ref={buttonRef}>Try the button</eos-button>;
}Vue 3
<template>
<eos-button @click="handleClick">Try the button</eos-button>
<eos-carousel autoplay loop :interval="3000">
<div>Slide one</div>
<div>Slide two</div>
</eos-carousel>
</template>
<script setup>
import '@eosjs/ui';
const handleClick = (event) => console.log('Clicked:', event);
</script>Angular
In Angular, add CUSTOM_ELEMENTS_SCHEMA to use EOS custom elements:
import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@eosjs/ui";
@Component({
selector: "app-root",
template: `
<eos-button>Try the button</eos-button>
<eos-carousel autoplay loop [attr.interval]="3000">
<div>Slide one</div>
<div>Slide two</div>
</eos-carousel>
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {}Native HTML
<script type="module">
import "@eosjs/ui";
document.querySelector("eos-button").addEventListener("click", (event) => {
console.log("Clicked:", event);
});
</script>
<eos-button>Try the button</eos-button>
<eos-carousel autoplay loop interval="3000">
<div>Slide one</div>
<div>Slide two</div>
</eos-carousel>Component methods and events
const carousel = document.querySelector("eos-carousel");
carousel.play();
carousel.pause();
carousel.next();
carousel.prev();
carousel.goTo(2);
carousel.addEventListener("change", (event) => {
console.log("Current index:", event.detail.currentIndex);
});Styling
Components expose EOS semantic CSS variables for host-level customization:
eos-button {
--eos-color-accent: #006fee;
--eos-color-accent-hover: #338af3;
--eos-color-accent-foreground: #fcfcfc;
--eos-color-focus-ring: #006fee;
}