Introduction
Keyframery adds animations to shadcn/ui with one line. Your components don't change.
Keyframery adds animations to the shadcn/ui components you already have. Render one <Cuts /> in your root layout, and your dialogs, sheets, tabs and toasts start moving from the button you pressed, and back into it.
with <Cuts />
Switch the preview to Stock to see shadcn's own motion, then back to Keyframery.
What you get
- Motion with no code changes. Dialogs, alert dialogs, sheets, drawers, tabs, toasts, the command menu and eleven more components animate as soon as
<Cuts />is in your layout. Nothing incomponents/uichanges. See what's automatic. - Four small components for the changes shadcn has no component for: cards that open into a page, lists, numbers and statuses and loading states.
- Control like colours. Speed, easing and the cut each component uses are CSS variables and props. See Customize.
Like the rest of shadcn, it's code you own: the CLI copies it into your project. Remove <Cuts /> and you have stock shadcn again.
Start here
- Quick start: three steps, about two minutes.
- Using Claude Code or another AI tool? See Use with AI tools.
Why "cuts"?
In film, a cut is how one shot becomes the next. A jump cut, where something suddenly appears in a new place, is jarring, and most interface changes are jump cuts. Keyframery replaces them with the cuts an editor would choose. See each one.