Project 11, Modern UI

UI Component Library

Six components you can drop into any page, with or without a framework. Each one is a custom HTML tag with its own styles, attributes and events.

Main API: Custom Elements v1
Styling: Shadow DOM, CSS parts
Dependencies: None
Your browser: Checking

Live components

Every block below is a real custom element. Click, type and use the keyboard. Events show underneath.

Accent color

Button

<ui-button variant="solid">

Save changes

Cancel

Delete

Saving

Toggle

<ui-toggle checked label="…">

Rating

<ui-rating value="3">

Progress ring

<ui-progress value="64">

Tabs

<ui-tabs><section title="…">

A short summary of the project.

Single file, 0 dependencies, MIT.

“Simple and fast.”

Accordion

<ui-accordion heading="…">

A private DOM tree whose styles do not leak in or out.

Yes. They are plain HTML tags, so any framework can render them.

How it works

Define a classEach component extends HTMLElement and builds its markup inside an open shadow root.
Watch attributesobservedAttributes lists what to watch, and attributeChangedCallback re-renders when one changes.
Talk to the pageComponents fire CustomEvents such as change, so any framework can listen with a normal event listener.

class UiToggle extends HTMLElement {
  static observedAttributes = ["checked", "label"];
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }
  attributeChangedCallback() { this.render(); }
  toggle() {
    this.toggleAttribute("checked");
    this.dispatchEvent(new CustomEvent("change", { detail: this.hasAttribute("checked") }));
  }
  render() { /* build markup inside this.shadowRoot */ }
}
customElements.define("ui-toggle", UiToggle);