---
name: "@keyframery"
slug: "keyframery"
description: "An open-source motion layer for shadcn/ui. One <Cuts /> line animates your dialogs, sheets, tabs and toasts; four helpers animate lists, numbers, skeletons and cards."
category: "Animated components"
tags: ["animation", "cards", "hooks", "icons", "loaders", "navigation", "overlays"]
framework: "react"
license: "MIT"
author: "keyframery"
website: "https://keyframery.com"
github: "https://github.com/keyframery/keyframery"
registry: "https://keyframery.com/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 7
generated_at: "2026-10-10T06:32:55.998Z"
---

# @keyframery

An open-source motion layer for shadcn/ui. One <Cuts /> line animates your dialogs, sheets, tabs and toasts; four helpers animate lists, numbers, skeletons and cards.

## Links

- Website: https://keyframery.com
- GitHub: https://github.com/keyframery/keyframery
- Registry JSON: https://keyframery.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/keyframery
- This file: https://sh4dcn.vercel.app/md/keyframery.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://keyframery.com/r/registry.json
pnpm dlx shadcn@latest add https://keyframery.com/r/registry.json
bunx shadcn@latest add https://keyframery.com/r/registry.json
# clone the source repo
git clone https://github.com/keyframery/keyframery.git
# fetch the raw registry index
curl -s https://keyframery.com/r/registry.json
```

## Components (7)

| name | type | description | install |
| --- | --- | --- | --- |
| cuts | registry:component | Film cuts for shadcn. Add <Cuts /> once to your root layout. | `npx shadcn@latest add https://keyframery.com/r/cuts.json` |
| value-cut | registry:component | A value that changes in place (a price, a count, a status) punches in. | `npx shadcn@latest add https://keyframery.com/r/value-cut.json` |
| load-cut | registry:component | A placeholder becomes real without a jump; fast data never flashes a skeleton. | `npx shadcn@latest add https://keyframery.com/r/load-cut.json` |
| list-cut | registry:component | Lists that change without jumping: arrivals, departures and reorders, keyed by id. | `npx shadcn@latest add https://keyframery.com/r/list-cut.json` |
| state-cut | registry:component | Whole-content state changes settle with a fade or slide and a smooth container height. | `npx shadcn@latest add https://keyframery.com/r/state-cut.json` |
| icon-moves | registry:component | When a control with an icon is pressed, its icon plays its own move: a gear turns, a bell rings, a lid lifts. Works with the lucide icons already in your app. | `npx shadcn@latest add https://keyframery.com/r/icon-moves.json` |
| match-cut | registry:component | A thing opens into its bigger self (card → detail), on the same page or across a route change. | `npx shadcn@latest add https://keyframery.com/r/match-cut.json` |

## For AI agents

```text
You are adding components from @keyframery to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/keyframery.md) for the component list.
2. Fetch the machine-readable index: https://keyframery.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: keyframery).
```