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

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!