Keyframery

Overview

Keyframery is an open-source animation library that adds a consistent motion layer to an existing shadcn/ui app. Adding the <Cuts /> component once to the root layout animates dialogs, sheets, tabs and toasts, while the components themselves stay as they are in the project.

For motion inside custom markup, the registry ships six more helpers covering lists, changing values, loading states, whole-content state changes, icon moves and card-to-detail transitions. The site states it is about 12 KB gzipped with no animation dependencies, works with Base UI and Radix, and runs in Next.js, Vite and React Router. It is MIT licensed and needs no account.

Features

• One-line setup: <Cuts /> in the root layout animates dialogs, which grow from the button that opened them and return there on close.
• ListCut: Lists keyed by id handle arrivals, departures and reorders without jumping.
• LoadCut: Quick responses skip the skeleton, and slower ones dissolve from placeholder into real content.
• ValueCut and StateCut: Changing prices, counts and statuses punch in, and state swaps settle with a fade or slide and a smooth container height.
• Icon moves: Pressing a control plays a move on its lucide icon, such as a turning gear or a ringing bell.
• Match cut: A card opens into its detail view on the same page or across a route change.
• Motion themes: Quiet, Crisp and Express profiles can be tuned for pace and easing, saved locally and shared by link.

Tech stack

• shadcn/ui (Base UI or Radix)
• React with Next.js, Vite or React Router
• No animation library dependency

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @keyframery/component-name