Forem: Alexander van Elsas

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

Alexander van Elsas — Fri, 10 Apr 2026 20:13:04 +0000

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>

Check out the 80 Demos!

I’ve updated every single demo page with the new theme picker so you can see x-theme in action across the entire library.

GitHub: avanelsas/baredom
Live demos: BareDOM Github Page

I’d love to hear which of the 8 new presets is your favorite!.

webdev #showdev #webcomponents #clojurescript #javascript #uidesign

Native Web Components don't have to be boring. Meet BareDOM v1.3.0

Alexander van Elsas — Tue, 07 Apr 2026 18:25:57 +0000

Announcing v1.3.0 of BareDOM
I wanted to add some modern, fun, kinetic, organic, and animated UI elements that feel alive, without the 50kb runtime tax. The latest update to BareDOM moves away from static UI elements and introduces components designed with motion and fluidity in mind.

New web components include :

Effects : x-ripple-effect, x-gaussian-blur, x-splash, x-metaball-cursor, x-neural-glow, x-organic-progress
Layout : x-bento-grid, x-bento-item
Scroll : x-scroll-stack, x-scroll-parallax, x-scroll-timeline, x-scroll-story
Typography : x-typography, x-kinetic-typography
Decorative : x-organic-divider, x-organic-shape

Why go Bare?

BareDOM is built in ClojureScript but delivered as pure ESM or via NPM. You get the benefit of sophisticated functional logic under the hood, but for your project, it’s just a standard tag.

Why BareDOM:

Works in any stack. Because components are native HTML elements, they work wherever HTML works — vanilla JavaScript, React, Vue, Svelte, Angular, server-rendered HTML, or a static page. No adapter layer, no wrapper library.
No framework lock-in. Your components are not tied to the framework you are building with today. Migrate your app, keep your components.
Tree-shakeable by design. Each component is a separate ES module. Import only what you use; bundle tools eliminate the rest automatically.
Full theming with CSS custom properties. Every visual detail — colours, spacing, radius, shadows, typography — is exposed as a --x-<component>-<property> CSS custom property. Override at any scope: globally, per-page, per-instance.
Light and dark mode included. All components adapt automatically to prefers-color-scheme. No JavaScript required, no class toggling.
Accessibility built in. ARIA roles, live regions, keyboard navigation, focus management, and prefers-reduced-motion support are part of the component, not an afterthought. You do not need to layer accessibility on top.
Open Shadow DOM. Shadow roots are mode: "open" — inspectable in DevTools, styleable via ::part(), and testable with standard DOM APIs.

See it in action

Check out the repo, grab a few components, and let me know what you think!

BareDOM: 67 Zero-Dependency Web Components (Built with CLJS)

Alexander van Elsas — Sun, 05 Apr 2026 19:48:29 +0000

Like most ClojureScript developers, I started building UIs with Reagent and Re-frame. They're great tools. But as my UIs grew larger and more complex, I kept rebuilding the same generic components from scratch. Bundle sizes crept up. Framework lock-in felt heavier with each project.

I started looking for a different approach and discovered Web Components. Native. Framework-free. Works anywhere HTML works. I built a few by hand, but never had the spare time to develop a full set.

While experimenting with Claude Code, I realised that 1 + 1 could be 3. That's how BareDOM was born — my first open-source project.

What is BareDOM?

BareDOM is a library of 67 UI components built entirely on web standards — Custom Elements v1, Shadow DOM, and ES modules. No framework runtime. No virtual DOM. No peer dependencies.

The rendering model is deliberately simple:

DOM = f(attributes, properties)

Components are stateless. Set an attribute, the DOM updates. Remove it, it updates back. No hidden reactive systems, no signals, no state management to learn.

It's authored in ClojureScript and compiled to optimised ES modules using Google Closure's advanced compilation. But you don't need to know ClojureScript to use it — it's just HTML elements.

See it live

Browse all 67 components with interactive demos:

👉 https://avanelsas.github.io/baredom/

What's in the box?

Form: button, checkbox, switch, slider, select, date-picker, search-field, text-area, and more

Feedback: alert, badge, toast, notification-center, progress, spinner, skeleton

Navigation: navbar, sidebar, tabs, breadcrumbs, pagination, menu

Layout: card, grid, container, collapse, divider, spacer

Data: table, chart, timeline, avatar, stat

Overlay: modal, drawer, dropdown, popover, command-palette, context-menu

Visual/Animation: scroll-parallax, scroll-story, kinetic-typography, ripple-effect, organic-shape, gaussian-blur

How to use it

No build tool? No problem. Drop this into any HTML page:

<script type="module">
  import { init } from './dist/x-button.js';
  init();
</script>

<x-button variant="primary" size="md">Click me</x-button>

That's it. A script tag and an HTML element. The browser loads only the modules you import.

Prefer npm? That works too:

npm install @vanelsas/baredom

import { init } from '@vanelsas/baredom/x-button';
init();

No framework setup, no providers, no config. Works in vanilla JS, React, Vue, Svelte, Angular, or a static page.

Key features

Zero runtime — no framework overhead, just native custom elements
Tree-shakeable — each component is a separate ES module, import only what you need
Full theming — every visual property exposed as CSS custom properties (--x-button-bg, etc.)
Dark mode built-in — all components adapt to prefers-color-scheme automatically
Accessibility included — ARIA roles, keyboard navigation, focus management, reduced motion support
Open Shadow DOM — inspectable, styleable via ::part(), testable with standard APIs

What's next?

I'd love feedback from both JavaScript and ClojureScript developers. Try a component, file an issue, or just tell me what you think. The current version is v1.2.0 — more components and refinements are coming.

BareDOM is MIT licensed and open source.