remold/ui

Introduction

Animated React components you copy into your app, and the small engine that morphs them.

Remold UI is an open-source library of animated React components, and the engine underneath them. Copy a component into your app, or use the engine to animate changes in your own interface.

What is this?

Two things that work together.

Components for the screens you actually ship: inputs, menus, checkouts, dashboards, chat and more. Each one solves a specific product problem and animates only the change that matters. They're built on Base UI for behaviour and accessibility, and animated with Motion and Remold.

The engine that animates change. When your interface updates, Remold compares what was on screen with what's next, finds the elements that correspond, and springs each one into its new place. It works across layouts, text, SVG paths and canvas, including thousands of particles in 3D.

No animation IDs

Most animation tools need you to pair states by hand, with layoutId or view-transition-name. Remold matches elements by their content, geometry and surroundings instead, so it keeps working when the markup is rebuilt by a server response, another component or generated content. You render your interface normally.

Any framework

React gets components and hooks from @remold-ui/react. Everywhere else, @remold-ui/dom animates any element from plain JavaScript, so it works with Vue, Svelte, Astro or a server-rendered page. @remold-ui/canvas draws scenes and particles, and @remold-ui/core is the matching and spring maths on its own, with no DOM at all.

You own the code

Components are distributed through a shadcn registry. Installing one drops its source and CSS into your project, where you can read it, change it and version it like anything else you wrote. The engine is a normal package you update when you choose.

Accessible by default

Remold follows the system's reduced-motion setting: changes happen at once instead of animating. Morphing text stays real text for screen readers, and focus stays on the element you were on when it's replaced.

Next steps

On this page