The problem with modern UI components
Most UI component libraries come with a cost nobody talks about upfront.
You install one button. You get React as a peer dependency. You get a build pipeline. You get 400MB of node_modules. You get a bundler config. You get version conflicts with whatever framework your project is already using.
For a button.
That never sat right with me. So I built Aetheric UI — a component library where every component is a pure Vanilla JS Web Component. Shadow DOM isolated. Zero dependencies. No React. No build step. Just drop in a tag and it works.
Wave 2 is live
Wave 2 ships 10 button components, each hand-coded from scratch.
Icon Button — A dark neumorphic circle button with smooth press feedback. Works great for social links, actions, toolbars.
Soft Button — A warm pastel surface button with an icon accent. Clean, friendly, tactile.
Round Button — A light neumorphic round button. Minimal, satisfying press state.
Press Button — A neobrutalist button with a bold physical push-down effect. No animations — just weight.
Pill CTA Button — A dark pill-shaped CTA with arrow accent and hover animation. Built for conversion.
Neon Button — A dark button with a glowing border and hover pulse. Subtle enough to not look cheap.
Neobrut Button — A neobrutalist pill with a bold border and sliding arrow. Clean and sharp.
Keyboard Button — A tactile keyboard-style button with a physical press animation and glow effect. The most satisfying one to click.
Frosted Button — A frosted glass search-style button with a smooth dark surface. Great for nav and search UIs.
Hardware Button — An unlock-style hardware button with neumorphic press and ambient glow. The most unique one in the pack.
How it works
Every component uses the Web Components API — specifically customElements.define and attachShadow.
Shadow DOM means the component's styles are completely isolated from the rest of your page. No class name collisions. No CSS leaking in or out. The component brings its own styles and they stay contained.
Usage looks like this:
<ae-keyboard-button label="Command" icon="⌘"></ae-keyboard-button>
That's it. No imports. No npm install. No bundler. Just a script tag and a custom element.
Every shadow, every depth effect, every press animation is hand-coded — no UI libraries, no shortcuts. Neumorphic shadows, inset box shadows, CSS transitions, ambient glows — all written directly.
Live demo
See all 10 components running live here: [https://deusexspiravit.github.io/aetheric-ui/]
Get them
Individual components are $9 each. The full Wave 2 Button Pack — all 10 — is $49.
aethericlabs.lemonsqueezy.com
Wave 3 is already in progress. More coming every Friday.
