Introduction

What loom is, why it exists, and what it is trying to be.

loom is a collection of animated React components you copy into your project. Every one is a single file with no runtime dependency on this library. Once it is in your repo it is yours. Edit it, rename it, delete it. Nothing upstream breaks.

Components are distributed through a shadcn-compatible registry, so npx shadcn@latest add @loomui/weave-text drops the source into components/ui and that is the end of loom's involvement in your codebase.

Why I built this

I have always loved building the small, fiddly pieces. A button that acknowledges a press from the exact spot it was pressed. A card that leans away from your pointer and settles back when you leave. They take the longest to get right, they are the first thing cut when a deadline moves, and they are the part of an interface people actually remember.

They are also solved problems that everybody keeps solving again from scratch. loom is the version I wanted to exist, and it is MIT licensed with nothing held back, because I would rather it grew from other people's hands than only from mine.

Contributing

Every component here started as one file. If you have written one you are proud of, open a pull request.

What loom is trying to be

Motion that means something. Every animation reports a fact. A ripple starts where you pressed because that is where you pressed. Motion that decorates instead of reporting is noise, and noise is what makes people ask for the animations to be turned off.

One file, no runtime. No provider to wrap your app in and no animation library in your bundle. If a component needs a keyframe, it ships the keyframe.

Accessible without being asked. Every component checks prefers-reduced-motion itself and settles into its finished state. Buttons are buttons, and decoration is hidden from screen readers instead of read out.

Yours, immediately. The code in the docs is the code you get.

Credit

loom follows the path shadcn/ui cut, where a component library is a registry of files you own rather than a package you depend on. The components here are built to sit alongside shadcn/ui in the same project, on the same tokens and the same cn() helper.

Where to go next

Set the registry up once on the Installation page, or go straight to the components and pick something.