DEV Community

Alexander van Elsas
Alexander van Elsas

Posted on

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

#webcomponents #javascript #opensource #showdev

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>
Enter fullscreen mode Exit fullscreen mode

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

Links

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.

Top comments (0)