EOS UI

Framework-agnostic Web Components for building consistent interfaces.
One component model that works across HTML, React, Vue, and Angular.

简体中文 · English

EOS UI is a lightweight component library built on the browser's native Web Components platform. Components are distributed as custom elements, so the same API can be used in a plain HTML page or inside a framework application.

• Framework-agnostic custom elements for HTML, React, Vue, and Angular.
• Shadow DOM encapsulation for component styles.
• TypeScript declarations and generated Custom Elements Manifest metadata.
• Explicit registration with registerComponents() and safe browser-side auto-registration.
• Image loading primitives with lazy loading, eager loading, progress, and BlurHash placeholders.
• A pnpm workspace containing the component package, documentation, and framework playgrounds.

pnpm add @eosjs/ui

For local development from this repository, install the workspace dependencies first and use the package through the playgrounds or documentation app:

pnpm install

Import the package and register the elements once in your application entry point:

import { registerComponents } from "@eosjs/ui";

registerComponents();

Then use the custom elements directly:

<eos-button>Click me</eos-button>

<eos-carousel autoplay loop interval="3000">
  <eos-image
    src="/images/one.jpg"
    alt="First image"
    loading="eager"
  ></eos-image>
  <eos-image
    src="/images/two.jpg"
    alt="Second image"
    placeholder="LEHV6nWB2y..."
    placeholder-type="blurhash"
  ></eos-image>
</eos-carousel>

The package also exports the component classes, COMPONENT_CONFIG, registerComponents(), and registerComponent() for advanced integrations.

import "@eosjs/ui";

export function App() {
  return <eos-button>Click me</eos-button>;
}

Add node_modules/@eosjs/ui/jsx-types.d.ts to your tsconfig.json include list when your editor needs custom-element JSX types.

<script setup lang="ts">
import "@eosjs/ui";
</script>

<template>
  <eos-button>Click me</eos-button>
</template>

Configure your Vue compiler to treat tags beginning with eos- as custom elements.

import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@Component({
  selector: "app-root",
  template: "<eos-button>Click me</eos-button>",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {}

<script type="module">
  import { registerComponents } from "@eosjs/ui";
  registerComponents();
</script>

<eos-button>Click me</eos-button>

See the component package README for API details, attributes, events, methods, and framework type configuration.

eos/
├── packages/
│   ├── components/          # @eosjs/ui
│   └── utils/               # Shared utilities
├── docs/                    # Storybook documentation
├── playground/
│   ├── html/                # Native HTML playground
│   ├── vue/                 # Vue 3 playground
│   ├── react/               # React playground
│   └── angular/             # Angular playground
├── assets/                  # Repository branding assets
└── pnpm-workspace.yaml

pnpm install

Start the documentation site or a framework playground:

pnpm dev:docs       # documentation dev server
pnpm dev:html       # http://localhost:3001
pnpm dev:vue        # http://localhost:3002
pnpm dev:react      # http://localhost:3003
pnpm dev:angular    # http://localhost:3004

Useful package commands:

pnpm build:ui
pnpm build:docs
pnpm lint

MIT