Motion that communicates
Every animation here points at something. When two list items merge their backgrounds, the component tells you they belong together. The hover highlight follows your cursor before you click, so the row you're about to land on confirms itself first. Motion has a job to create meaning.
Hover as preview
The interaction starts before you click. The closest interactive thing to your cursor gets a faint highlight; buttons gain a little weight as you approach. By the time your finger lands, you've had a moment to reconsider, which is mostly the point.
Spring physics, not durations
Animations use springs, not fixed-duration eases. Toggle a switch and immediately toggle it back: the spring picks up wherever it was and reverses, instead of finishing the first animation before starting the second. Three presets, named fast, moderate, and slow, cover most of the library.
Drop-in compatible
Built on shadcn/ui. Each component comes in two flavors, Radix or Base UI, so you can match whichever primitive library you've already chosen. Your theme tokens (colors, radii, fonts) work as-is. One CLI command installs a component along with whatever it needs.
Customize using the right panel
The panel on the right lets you change things on the fly. Switch between light and dark mode, toggle the corner radius from rounded to pill, cycle through different icon libraries, or pick whether the install command grabs the Radix flavor or the Base UI one. Press T, R, or I to flip the first three from the keyboard. The icon switcher is a preview tool that lives on this site — installed components ship with Lucide only, and you can swap in your own icons (see Icons below).
Installation
1Add the registry to your project:
2Install any component:
Or install directly without adding the registry:
Dependencies and shared utilities are resolved automatically. Font weight animations require the Inter variable font.
Icons
Components render their icons through named slots with Lucide defaults, so lucide-react is the only icon dependency an install adds. To use another icon library, wrap your app in the installed IconProvider and override any slot — names you leave out keep their Lucide default:
import { IconProvider } from "@/lib/icon-context";
import { CaretRight, MagnifyingGlass } from "@phosphor-icons/react";
<IconProvider icons={{ "chevron-right": CaretRight, "search": MagnifyingGlass }}>
<App />
</IconProvider>