Skip to content

Introduction

@popovandrii/ui-elements is a small, framework-agnostic library of UI components written in plain TypeScript. Every component is driven by HTML markup and CSS classes — you write the markup, call one initializer, and the library wires up behavior, keyboard support and accessibility.

Why

  • Zero dependencies. Nothing to bundle but the library itself.
  • Works anywhere. No virtual DOM, no framework lock-in. Use it with plain HTML, Vue, React, server-rendered pages — anything that produces DOM.
  • Accessible by default. ARIA roles, keyboard handling and screen-reader value text are built in.
  • Themeable. Colors come from CSS custom properties, with light, dark and neon themes shipped as separate stylesheets.

How it works

Components are DOM scanners. You render the markup, then create a manager that finds every matching element and binds it:

ts
import { SpinBox } from '@popovandrii/ui-elements'
import '@popovandrii/ui-elements/style.css'

new SpinBox() // scans the document for `.UIsp` and wires each one up

The manager exposes a lifecycle — scan(), destroy(), setValue() — so it plays nicely with SPAs that add and remove DOM over time.

Head to Installation to add it to your project, or jump straight to a live SpinBox demo.