Vercel React View Transitions

This is a comprehensive guide to React's View Transition API, covering the `<ViewTransition>` component, transition types, and CSS pseudo-elements for animating UI state changes without third-party libraries. The documentation is notably opinionated about implementation order and when to animate, prioritizing shared element transitions for hierarchical navigation and explicitly discouraging animations that don't communicate spatial relationships. It includes ready-to-use CSS recipes and addresses Next.js integration quirks like the canary React version bundling. One limitation to note: browser back button animations aren't supported due to popstate being synchronous. The skill works best when you follow the provided implementation workflow rather than cherry-picking patterns, since it's designed as a complete system for native-feeling page transitions and component animations.

GitHub stars: 27.8K
last updated: Jun 10, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/agent-skills --skill vercel-react-view-transitions --agent claude-code

Installs into .claude/skills of the current project.

Files

React View Transitions

Animate between UI states using the browser's native document.startViewTransition. Declare what with <ViewTransition>, trigger when with startTransition / useDeferredValue / Suspense, control how with CSS classes. Unsupported browsers skip animations gracefully.

When to Animate

Every <ViewTransition> should communicate a spatial relationship or continuity. If you can't articulate what it communicates, don't add it.

Implement all applicable patterns from this list, in this order:

Priority	Pattern	What it communicates
1	Shared element (`name`)	"Same thing — going deeper"
2	Suspense reveal	"Data loaded"
3	List identity (per-item `key`)	"Same items, new arrangement"
4	State change (`enter`/`exit`)	"Something appeared/disappeared"
5	Route change (page-level)	"Going to a new place"

This is an implementation order, not a "pick one" list. Implement every pattern that fits the app. Only skip a pattern if the app has no use case for it.