Installation

Install any component with the shadcn CLI, or copy the source straight from its page. Either way, the code ends up in your project. To animate your own interface, add the engine as a package.

RequirementsCopy Anchor Link

Components target React 18 or later, and TypeScript is recommended, since every file ships as typed source. Each component lists what it depends on (usually @remold-ui/react, motion and @base-ui/react), and the CLI installs them for you.

Install a componentCopy Anchor Link

Every component has an entry in the registry. Replace the name at the end with any component's.

npx shadcn@latest add https://your-docs-site/r/phone-input.json

The CLI drops the files into components/remold/ in your project. If you haven't used shadcn before, run npx shadcn@latest init first.

Install manuallyCopy Anchor Link

Prefer not to use a CLI? Open the component's page, switch to its code, copy each file into your project, and install the packages listed under Dependencies.

Install the engineCopy Anchor Link

For React:

npm install @remold-ui/react

For any other framework, or none:

npm install @remold-ui/dom

@remold-ui/canvas adds scenes and particles, and @remold-ui/core is the matching and spring maths on its own, for a Web Worker or the server. In React, the canvas parts come from @remold-ui/react/canvas, so an interface that doesn't use them never ships canvas code.

Use itCopy Anchor Link

Wrap the part of your interface that changes and give it a trigger that changes with it.

import { Remold } from "@remold-ui/react";

export function Files({ files, sort }) {
  return (
    <Remold.Morph trigger={sort}>
      {files.map((file) => (
        <Row key={file.name} file={file} />
      ))}
    </Remold.Morph>
  );
}

Next stepsCopy Anchor Link