Jelly UI: Soft Web Components with Real Physics

Jelly UI is a dependency-free Web Components library that brings soft, tactile interactions to product interfaces. It ships 40 custom elements, all built on the Web Components standard, with no framework lock-in. The library includes real form controls that incorporate soft-body physics for a more organic feel.

What's in the box

The library is designed to be dropped into any project with a single script tag. It includes a theme system that supports dark mode, right-to-left layouts, and WCAG AA color tokens out of the box. The components are built to be accessible and performant, with no external dependencies.

How it works

Jelly UI uses the Web Components standard, meaning you can use it with any framework or no framework at all. The components are registered as custom elements and can be styled with CSS custom properties. The library includes a <jelly-theme> wrapper that handles color scheme and accessibility tokens.

Here's a quick example of how to use it:

<script type="module" src="https://jelly-ui.com/package.js"></script>

<jelly-theme mode="auto">
  <jelly-button variant="mint">Publish</jelly-button>
</jelly-theme>

Why this matters

Most UI libraries are either heavy (Material UI, Ant Design) or too bare-bones. Jelly UI sits in a sweet spot: it's lightweight, framework-agnostic, and brings a unique soft-body physics feel that could make interfaces feel more natural. The built-in accessibility and dark mode support are nice touches that save developers time.

That said, the library is new and the component set is limited to form controls and basic UI elements. It's not a full design system replacement. But for projects that want a distinctive tactile feel without pulling in a massive dependency, it's worth a look.

Bottom line

Jelly UI is a well-executed Web Components library that brings something fresh to the table: soft-body physics in UI controls. It's lightweight, accessible, and easy to integrate. If you're building a product interface and want to stand out without sacrificing performance or accessibility, give it a try.