# Keyframery

> Animations for shadcn/ui. One <Cuts /> line gives dialogs, sheets, tabs and toasts real cuts; MatchCut, ListCut, ValueCut and LoadCut cover the rest. Full docs in one file: https://keyframery.com/llms-full.txt. MCP server: https://keyframery.com/mcp


- **Get started**
- [Introduction](/docs): Keyframery adds animations to shadcn/ui with one line. Your components don't change.
- [Quick start](/docs/installation): Add Keyframery to a shadcn/ui app in three steps. Next.js, Vite and React Router all work.
- [Use with AI tools](/docs/ai-tools): Use Keyframery from Claude Code, Codex, Cursor, VS Code, Gemini CLI or any MCP client, or give your assistant the docs as plain text.

- **Animate your app**
- [What's automatic](/docs/automatic): Once <Cuts /> is in your layout, these shadcn components move without any change to your code.
- [Cards that open into a page](/docs/helpers/match-cut): MatchCut: a card grows into its detail view, on the same page or on another route, and shrinks back when you return.
- [Lists](/docs/helpers/list-cut): ListCut: new items fly in from the button that added them, removed ones fold away, and moved ones glide.
- [Numbers and statuses](/docs/helpers/value-cut): ValueCut: only the digits that changed roll, and the value gives a small punch so the eye catches it.
- [Loading states](/docs/helpers/load-cut): LoadCut: the skeleton dissolves into the content in the same space, and never flashes when the data is fast.

- **Customize**
- [Speed, easing and cuts](/docs/customize): Tune Keyframery like you tune colours. CSS variables set speed and easing, <Cuts> props pick each component's cut, and attributes change one element.

- **Guides**
- [Loading data after a click](/docs/guides/data-loading): Use LoadCut and ValueCut with React Query, SWR or plain fetch, so loading never makes the page jump.
- [Detail pages on their own route](/docs/guides/detail-routes): Match a card on one route to its detail page on another, in the Next.js App Router.
- [Live data](/docs/guides/live-data): Websockets, polling and server pushes, with lists that don't jump and numbers people notice.
- [Turning motion off in tests](/docs/guides/testing): Keep end-to-end tests fast and steady, or assert that a cut actually played.
- [Performance](/docs/guides/performance): What Keyframery runs, what it costs, and the one variable to change on slow devices.

- **Reference**
- Components
  - [Dialog](/docs/components/dialog): The dialog grows out of the button that opened it, and closes back into it.
  - [Alert Dialog](/docs/components/alert-dialog): Alert dialogs share the dialog's cut, so a confirmation grows out of the button that asked for it.
  - [Sheet](/docs/components/sheet): The sheet slides in from its edge while the page steps back behind it.
  - [Drawer](/docs/components/drawer): The page steps back behind the drawer. Its swipe stays exactly as it was.
  - [Tabs](/docs/components/tabs): The tab pill leads and the new panel follows a beat later, like sound leading picture in a J-cut.
  - [Toast and Sonner](/docs/components/toast): A toast flies out of the button you pressed, so you see which action it's about.
  - [Command](/docs/components/command): The command menu opens with the dialog's cut.
  - [Tuned components](/docs/components/tuned): Eleven components that already move well. Keyframery only gives them its pace and easing.
- [How it works](/docs/how-it-works): The six kinds of change Keyframery covers, what <Cuts /> does in your page, and how closing animations and portals are handled.
- [Reduced motion and accessibility](/docs/accessibility): What Keyframery does when someone asks for less motion, and why it never gets in the way of focus or screen readers.
- [Base UI vs Radix](/docs/base-ui-vs-radix): Keyframery works the same on both shadcn bases. Here is what differs underneath.
- [Compatibility](/docs/compatibility): How each of shadcn's 63 components works with Keyframery, and the versions it's tested with.
- [Changelog](/docs/changelog): What changed in each release, with the versions it was tested against.