BareDom v2.0.0: 80 Components, customisable themes, responsive, and Zero Framework Tax

#webdev #webcomponents #uidesign #showdev

I’ve just released BareDom v2.0.0, and it’s the biggest update yet. BareDom has always been about "No framework, just the DOM," but v2.0.0 brings the library into a new form: a fully responsive design system powered by a centralized theming engine.

If you’ve been looking for a way to build high-performance, beautiful UIs without the weight of a heavy framework, this is for you.

The New Theming Engine: x-theme

The star of this release is x-theme. Instead of hunting through CSS variables for every component, you can now control your entire UI through one centralized component.

Key Features:
33 Design Tokens: Precise control over typography, spacing, shadows, and colors.

8 Built-in Presets: Instantly switch between ocean, forest, sunset, neo-brutalist, aurora, mono-ai, warm-mineral, and the default theme.

registerPreset() API: Create your own custom themes with partial merging, making it incredibly easy to brand your app.

The new theme picker is used on all 80 demo pages!

Mobile-First & Fully Responsive
In v2.0.0, all 80 components are overhauled for responsiveness.

Mobile-Ready: Components now adapt seamlessly to smaller screens.
The demo pages now work on both desktop and mobile. Interaction states and spacing have been refined for better mobile usability.

Why BareDom?

BareDom is built on a unique stack: ClojureScript compiled to tiny, tree-shakeable ES modules via Google Closure. It gives you:

Zero Runtime Dependency: Your users don't download a framework to render a button.

Standards First: Built on Custom Elements v1 and Shadow DOM.

Lightweight: Each component is its own module. Use only what you need.

Quick Start

Setting up a themed UI is now easier than ever:

HTML

<x-theme preset="neo-brutalist">
  <main>
    <x-button variant="primary">Hello BareDom v2</x-button>
  </main>
</x-theme>

<script type="module">
  import { init as initTheme } from './dist/x-theme.js';
  import { init as initButton } from './dist/x-button.js';

  initTheme();
  initButton();
</script>