# Item animation (/docs/components/item)



{/* Generated from lib/coverage.json by scripts/gen-components.mjs. Edit the data, then run the script. */}


## What moves [#what-moves]

| When                    | What you see                | Timing     | How                                 |
| ----------------------- | --------------------------- | ---------- | ----------------------------------- |
| Added, removed or moved | Arrive, fold away and glide | 260–380 ms | [ListCut](/docs/helpers/list-cut)   |
| Opens into its detail   | Match cut                   | 420 ms     | [MatchCut](/docs/helpers/match-cut) |

## Install [#install]

Install [ListCut](/docs/helpers/list-cut) and wrap the part that changes: `npx shadcn add @keyframery/list-cut`.

Install [MatchCut](/docs/helpers/match-cut) and wrap the part that changes: `npx shadcn add @keyframery/match-cut`.

## Turn it off [#turn-it-off]

Put `data-cut="none"` on a item (or anything around it) to keep shadcn's own motion there. `<Cuts responses="none" />` turns off every response across the app and keeps the cuts. With reduced motion, movement becomes a short fade or nothing.