Web Components Kit

We keep building interfaces that outlive the framework they started in. These components are plain custom elements: they register themselves on import, carry their own styles in Shadow DOM, and work the same in a framework or in none. Every element is a wk-* tag styled through --wk-* custom properties, so nothing in the library can collide with the variables of the project it lands in

pnpm add @eli_tabrisov/web-components-kit

import '@eli_tabrisov/web-components-kit'
import '@eli_tabrisov/web-components-kit/style.css'

Both imports are needed: the first registers the elements, the second loads the design tokens they consume

<wk-form-group> wraps a native label and input and upgrades the browser’s own validation — the native error bubble is replaced by an inline message you write, per validity state:

<wk-form-group
  value-missing-message="We need an email address to get back to you"
  type-mismatch-message="That email does not look right — check for a typo"
>
  <label for="email">Email</label>
  <input id="email" type="email" name="email" required />
</wk-form-group>

Each attribute maps to a ValidityState flag — value-missing, type-mismatch, pattern-mismatch, too-short, range-overflow and the rest — so a form can say something specific for every way a field can be wrong, without a validation library

Seven elements: wk-alert, wk-button, wk-card, wk-dialog, wk-form-group, wk-toast (with a ToastManager API) and wk-tooltip. They ship ARIA attributes and semantic markup, follow prefers-color-scheme with a data-theme override, and collapse their transitions under prefers-reduced-motion. TypeScript users get every tag declared in HTMLElementTagNameMap

The library powers the DariDobro site UI — and this website too: the contact form’s validation messages, the contact dialog and the toasts you get after submitting it are all wk-* elements

Published on npm under the MIT license, and installable by anyone