Wave 2 of Aetheric UI — 10 hand-coded button Web Components, zero dependencies

Why I keep building in Vanilla JS

Every time I start a new project the same conversation happens.

Someone suggests a component library. The component library needs React. React needs a bundler. The bundler needs config. The config needs maintenance. Six hours later you have a button on screen and a node_modules folder the size of a small country.

I got tired of it. So I built Aetheric UI — a component library where every component is a Web Component. Pure Vanilla JS. Shadow DOM isolated. Zero dependencies. Drop in a script tag, use the custom element, done.

Wave 1 shipped 5 toggle and hardware components. Wave 2 ships 10 buttons.

The components

Icon Button — Dark neumorphic circle button. Smooth press feedback. Perfect for social links and action toolbars.

Soft Button — Warm pastel surface with an icon accent. Friendly and tactile without being loud.

Round Button — Light neumorphic round button. Minimal with a satisfying press state.

Press Button — Neobrutalist push-down button. Bold, physical, no-nonsense.

Pill CTA Button — Dark pill-shaped CTA with arrow accent and hover animation. Built to convert.

Neon Button — Glowing border, hover pulse, dark background. Subtle enough to look intentional.

Neobrut Button — Neobrutalist pill with bold border and sliding arrow. Sharp and clean.

Keyboard Button — Tactile keyboard-style button with physical press animation and glow. The best one to click.

Frosted Button — Frosted glass search-style button with a smooth dark surface. Great for nav UIs.

Hardware Button — Unlock-style hardware button with neumorphic press and ambient glow. Nothing else looks like it.

The technical approach

Each component is built using the Web Components API:

class KeyboardButton extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>/* all styles scoped here */</style>
      <div class="kb-btn">...</div>
    `;
  }
}
customElements.define('ae-keyboard-button', KeyboardButton);

Shadow DOM scopes all styles to the component. Nothing leaks in, nothing leaks out. No class name collisions with your existing codebase. The component is self-contained.

Attributes let you configure the component from HTML:

<ae-keyboard-button label="Command" icon="⌘"></ae-keyboard-button>
<ae-soft-button label="More info" icon="⚡"></ae-soft-button>

Every visual detail — neumorphic shadows, inset press states, ambient glows, CSS transitions — is hand-coded. No UI libraries. No shortcuts.

Live demo

All 10 components running live: [https://deusexspiravit.github.io/aetheric-ui/]

Pricing

Individual components at $9 each. Full Wave 2 Button Pack at $49.

aethericlabs.lemonsqueezy.com

Wave 3 is already in progress.